import * as React from 'react';

import { Slot } from '@radix-ui/react-slot';
import { type VariantProps, cva } from 'class-variance-authority';

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

/* ============================================================================
   BADGE — the small, static LABEL chip (category, status, meta tag).
   ----------------------------------------------------------------------------
   A label, not a control. For interactive filter pills use <Tag>; for CTAs use
   <Button>. House shape: sharp corners, uppercase, tight tracking (matches the
   `.ui-chip` utility and <Button>).

   CLICKABILITY is not a prop here — follow the house pattern and pass `asChild`
   with a <RouteLink> when the badge should navigate:
     • static   ->  <Badge>Kiállítás</Badge>                      (renders <span>)
     • link     ->  <Badge asChild><RouteLink href=…>…</RouteLink></Badge>

   The `category` variant carries no color of its own — the per-category color
   lives in calendarCategories as a ready Tailwind class (`bgColor`), so pass
   that via className (NOT a dynamically-built `bg-[…]` — Tailwind won't emit it,
   NOT inline style — the literal class is already scanned & generated):
     <Badge variant="category" className={getCategoryColors(label).bgColor}>…</Badge>
   ========================================================================== */

const badgeVariants = cva(
  'inline-flex w-fit items-center font-semibold uppercase transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mma-blue focus-visible:ring-offset-2',
  {
    variants: {
      variant: {
        /** primary = ink (#151720), matches Button default */
        solid: 'border border-transparent bg-[#151720] text-white',
        /** hairline label — mirrors `.ui-chip-outline` */
        outline: 'border border-[#151720]/30 text-[#151720]/75',
        /** brand gold */
        accent: 'border border-transparent bg-mma-yellow text-[#151720]',
        /** colored category chip — set the background via `style` (see header) */
        category: 'border border-transparent text-white',
      },
      size: {
        sm: 'px-1.5 py-0.5 text-[10px] tracking-[0.2em]',
        md: 'px-3 py-1 text-xs tracking-[0.3em]',
      },
    },
    defaultVariants: {
      variant: 'solid',
      size: 'md',
    },
  }
);

export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
  asChild?: boolean;
}

function Badge({ className, variant, size, asChild = false, ...props }: BadgeProps) {
  const Comp = asChild ? Slot : 'span';
  return <Comp className={cn(badgeVariants({ variant, size }), className)} {...props} />;
}

export { Badge, badgeVariants };