import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

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

/**
 * Compact pill used for counts, tags, and overlays. Variants match the
 * surface tokens in tailwind.config.js:
 *   default  → primary tint (user-affirmed state)
 *   neutral  → surface-2 (informational metadata)
 *   overlay  → dark-on-photo count badge used in grid-view cards
 *   outline  → border-only, for subdued contexts
 */
const badgeVariants = cva(
  'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-primary/20 text-primary',
        neutral: 'bg-surface-2 text-text-muted',
        overlay: 'bg-black/60 text-white backdrop-blur-sm',
        outline: 'border border-border text-text-muted',
      },
    },
    defaultVariants: { variant: 'default' },
  },
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof badgeVariants> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <span className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { badgeVariants }