import { StyleSheet } from 'react-native';
import { BOLD } from '../../common/weight';

import type { TokensType } from '../theme/interface';

export const varCreator = (TOKENS: TokensType) => {
  return {
    action_sheet_description_color: TOKENS.gray_7,
    action_sheet_description_font_size: TOKENS.font_size_3,
    action_sheet_description_line_height: TOKENS.line_height_1,
    action_sheet_text_color: TOKENS.gray_8,
    action_sheet_text_font_size: TOKENS.font_size_5,
    action_sheet_cancel_padding_top: TOKENS.space_2,
    action_sheet_cancel_padding_color: '#ECEEF1',
  };
};

type ComponentVars = ReturnType<typeof varCreator>;

export const styleCreator = (cv: ComponentVars) => {
  return StyleSheet.create({
    description: {
      flexShrink: 0,
      textAlign: 'center',
      color: '#999999',
      fontSize: cv.action_sheet_description_font_size,
      lineHeight: cv.action_sheet_description_line_height,
      paddingBottom: 12,
    },

    description_alone: {
      paddingTop: 12,
    },

    button_wrapper: {
      paddingHorizontal: 20,
    },

    button_text: {
      fontSize: cv.action_sheet_text_font_size,
      fontWeight: BOLD,
    },

    gap: {
      height: cv.action_sheet_cancel_padding_top,
      backgroundColor: '#F5F5F5',
    },
  });
};