import { cva } from 'class-variance-authority'
import { cn } from '../../utils'
import { typographyVariants } from '../Typography'

export const styleVariants = {
  default: 'border-border bg-muted text-foreground',
  progress: 'border-progress-border bg-progress text-progress-foreground',
  success: 'border-success-border bg-success text-success-foreground',
  warning: 'border-warning-border bg-warning text-warning-foreground',
  urgent: 'border-error-border bg-error text-error-foreground',
  muted: 'border-border-muted bg-muted text-muted-foreground',
}

export const sizeVariants = {
  default: cn(
    typographyVariants({ variant: 'body-s' }),
    'h-8 px-2.5 [&_svg]:size-4',
  ),
  sm: cn(typographyVariants({ variant: 'body-xs' }), 'h-5 px-2 [&_svg]:size-3'),
}

export const tagVariants = cva(
  'inline-flex items-center justify-center gap-1 rounded-3xl border border-solid whitespace-nowrap',
  {
    variants: {
      size: sizeVariants,
      variant: styleVariants,
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)