import { config } from './variants'

import { VariantProps } from 'class-variance-authority'
import { Typography } from '../Typography'
import { TypographyProps } from '../Typography/types'

interface BadgeProps extends VariantProps<typeof config> {
  number: number
}

export function Badge({ number, color, size }: BadgeProps) {
  const classNames = config({
    color,
    size,
  })

  return (
    <Typography variant={getTypography(size)}>
      <span className={classNames}>{number}</span>
    </Typography>
  )
}

function getTypography(size: BadgeProps['size']): TypographyProps['variant'] {
  switch (size) {
    case '36':
    case '32':
      return 'Body/Paragraph/mdBold'
    case '28':
    case '24':
      return 'Body/Supporting text (caption)/smBold'
    case '20':
      return 'Label/xsRegular'
  }
}