import { Typography } from "../Typography"

import { variants } from "./variants"

import type { TypographyProps } from "../Typography/types"
import type { VariantProps } from "class-variance-authority"
import type { ReactNode } from "react"

type ChipStaticProps = {
  children: ReactNode
  className?: string
  lowerCase?: boolean
} & VariantProps<typeof variants>

export function ChipStatic({
  className,
  color,
  size,
  lowerCase = false,
  children,
}: ChipStaticProps) {
  const classNames = variants({ className, color, size })
  const typographyVariant = getTypographyVariant(lowerCase)

  return (
    <Typography variant={typographyVariant}>
      <span className={classNames}>{children}</span>
    </Typography>
  )
}

function getTypographyVariant(lowerCase: boolean): TypographyProps["variant"] {
  if (lowerCase) {
    return "Body/Supporting text (caption)/smRegular"
  }
  return "Tag/sm"
}