import { cva } from 'class-variance-authority'
import { colorVariants } from './foregroundColors'

const bodyVariants = {
  'body-xl': 'font-normal font-sans text-xl leading-7',
  'body-semi-xl': 'font-semibold font-sans text-xl leading-7',
  'body-l': 'font-normal font-sans text-lg leading-7',
  'body-semi-l': 'font-semibold font-sans text-lg leading-7',
  body: 'font-normal font-sans text-base leading-6 ',
  'body-semi': 'font-semibold font-sans text-base leading-6',
  'body-s': 'font-normal font-sans text-sm leading-5',
  'body-semi-s': 'font-semibold font-sans text-sm leading-5',
  'body-xs': 'font-normal font-sans text-xs leading-4',
  'body-semi-xs': 'font-semibold font-sans text-xs leading-4',
} as const

const codeVariants = {
  'code-xxl':
    'font-light font-mono white-space-pre text-4xl leading-8 md:text-5xl md:leading-9',
  'code-xl': 'font-light font-mono white-space-pre text-xl leading-5',
  'code-l': 'font-normal font-mono white-space-pre text-base leading-4',
  code: 'font-normal font-mono white-space-pre  text-sm leading-4',
  'code-s': 'font-normal font-mono white-space-pre text-xs leading-4 ',
  'code-xs': 'font-normal font-mono white-space-pre text-xxs leading-4 ',
} as const

const displayVariants = {
  'display-xl':
    'font-medium font-display text-8xl leading-12 md:text-11xl md:leading-15',
  'display-l':
    'font-medium font-display text-7xl leading-11 md:text-10xl md:leading-14',
  display:
    'font-medium font-display text-6xl leading-10 md:text-9xl md:leading-13',
  'display-s':
    'font-medium font-display text-5xl leading-9 md:text-8xl md:leading-12',
  'display-xs':
    'font-medium font-display text-4xl leading-8 md:text-7xl md:leading-11',
} as const

export const headingVariants = {
  h1: 'font-semibold font-display text-6xl leading-10',
  h2: 'font-semibold font-display text-5xl leading-9',
  h3: 'font-semibold font-display text-4xl leading-8',
  h4: 'font-medium font-display text-3xl leading-7',
  h5: 'font-medium font-display text-2xl leading-7',
  h6: 'font-medium font-display text-lg leading-6',
} as const

export const nonHeadingVariants = {
  ...bodyVariants,
  ...codeVariants,
  ...displayVariants,
}

export const allVariants = { ...headingVariants, ...nonHeadingVariants }

export const typographyVariants = cva('m-0 text-foreground', {
  variants: {
    variant: {
      ...allVariants,
    },
    color: colorVariants,
  },
  defaultVariants: {
    variant: 'body',
  },
})