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: string | 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"
  }
}