import { cn } from '@/lib/utils'

interface BadgeProps {
  children: React.ReactNode
  variant?: 'default' | 'primary' | 'accent' | 'mint' | 'sun'
  className?: string
  onClick?: () => void
}

const variants = {
  default: 'bg-surface-warm text-text-secondary border border-border-light',
  primary: 'bg-primary-soft text-primary',
  accent: 'bg-accent-soft text-accent',
  mint: 'bg-mint-soft text-mint',
  sun: 'bg-sun-soft text-sun',
}

export function Badge({ children, variant = 'default', className, onClick }: BadgeProps) {
  const Tag = onClick ? 'button' : 'span'
  return (
    <Tag
      onClick={onClick}
      className={cn(
        'pill inline-flex items-center font-semibold transition-all duration-150',
        variants[variant],
        onClick && 'cursor-pointer hover:scale-105 active:scale-95',
        className,
      )}
    >
      {children}
    </Tag>
  )
}