import React, { ElementRef, forwardRef } from "react"
import { tv } from "tailwind-variants"
import { classNames } from "../../utils/classNames"
import { FlexCenter, FlexCenterProps } from "../FlexCenter"
import { textLabelVariants } from "../Text/TextLabel"

export type ChipProps = {
  children: React.ReactNode
  className?: string
  variant?: "default" | "frosted"
} & FlexCenterProps

const chipVariants = tv({
  base: "h-[18px] w-fit whitespace-nowrap rounded px-1.5 py-1",
  variants: {
    variant: {
      default: "bg-bg-primary border border-border-1",
      frosted: "bg-frosted-2 border border-frosted-3",
    },
  },
})

export const Chip = forwardRef<ElementRef<"div">, ChipProps>(function Chip(
  { children, className, variant = "default", ...rest },
  ref,
) {
  return (
    <FlexCenter
      className={classNames(
        chipVariants({ variant }),
        textLabelVariants({ size: "xs" }),
        className,
      )}
      ref={ref}
      {...rest}
    >
      {children}
    </FlexCenter>
  )
})