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

type ThemeLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

const StyledTitle = styled(Text)<{
  themeIntent: TypographyColorIntent;
  themeLevel: ThemeLevel;
  themeTypeface: 'neutral' | 'playful';
  themeIsItalic?: boolean;
}>(
  ({
    themeIntent,
    themeLevel,
    theme,
    themeTypeface: typeface,
    themeIsItalic,
  }) => ({
    fontSize: theme.__hd__.typography.fontSizes.titles[typeface][themeLevel],
    lineHeight:
      theme.__hd__.typography.lineHeights.titles[typeface][themeLevel],
    letterSpacing:
      theme.__hd__.typography.letterSpacings.titles[typeface][themeLevel],
    color: theme.__hd__.typography.colors[themeIntent],
    fontFamily: themeIsItalic
      ? theme.__hd__.typography.fontWeights.titles[typeface][
          `${themeLevel}Italic`
        ]
      : theme.__hd__.typography.fontWeights.titles[typeface][themeLevel],
  })
);

export { StyledTitle };