import * as React from 'react'
import tw, { TwStyle } from 'twin.macro'

const PRIMARY_STYLE = tw`
inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`
type VariantType = 'default' | 'secondary' | 'destructive' | 'outline'

const VARIANT_MAP = {
  default: tw`bg-primary hover:bg-primary/80 border-transparent text-primary-foreground`,
  secondary: tw`bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground`,
  destructive: tw`bg-destructive hover:bg-secondary/80 border-transparent text-destructive-foreground`,
  outline: tw`text-foreground`,
} satisfies Record<VariantType, TwStyle>

interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: VariantType
}

function Badge({ variant = 'default', ...props }: BadgeProps) {
  return <div css={[PRIMARY_STYLE, VARIANT_MAP[variant]]} {...props} />
}

export {
  Badge,
  VARIANT_MAP as BADGE_VARIANT_MAP,
  type VariantType as BadgeVariantType,
}
