import { Text } from 'react-native';
import styled from '@emotion/native';
import type { TypographyColorIntent } from '../types';
import { FONTWEIGHT_MAP } from '../types';

const LETTER_SPACING_MAP: Record<'regular' | 'medium' | 'semi-bold', number> = {
  regular: 0.36,
  medium: 0.3,
  'semi-bold': 0.24,
} as const;

const StyledCaption = styled(Text)<{
  themeFontWeight: 'regular' | 'medium' | 'semi-bold';
  themeIntent: TypographyColorIntent;
  themeIsItalic?: boolean;
}>(({ themeFontWeight, themeIntent, theme, themeIsItalic }) => {
  const baseFontWeight = FONTWEIGHT_MAP[themeFontWeight];
  const fontFamily = themeIsItalic
    ? theme.__hd__.typography.fonts.neutral[`${baseFontWeight}Italic`]
    : theme.__hd__.typography.fonts.neutral[baseFontWeight];

  const letterSpacing = LETTER_SPACING_MAP[themeFontWeight];

  return {
    fontSize: theme.__hd__.typography.fontSizes.caption,
    lineHeight: theme.__hd__.typography.lineHeights.caption,
    letterSpacing,
    color: theme.__hd__.typography.colors[themeIntent],
    fontFamily,
  };
});

export { StyledCaption };