'use client';

import * as React from 'react';
import { cva, type VariantProps } from '@/lib/cva';
import { Slot } from 'radix-ui';

import { cn } from '@/lib/utils';
import { focusRing, invalidState } from '@/lib/cva-presets';

const badgeVariants = cva(
  cn(
    'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap',
    'transition-[color,box-shadow] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
    '[&>svg]:pointer-events-none [&>svg]:size-3',
    focusRing,
    invalidState
  ),
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'bg-destructive text-destructive-foreground focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
        success: 'bg-success text-success-foreground [a&]:hover:bg-success/90',
        warning: 'bg-warning text-warning-foreground [a&]:hover:bg-warning/90',
        outline:
          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

export interface BadgeProps
  extends React.ComponentProps<'span'>,
    VariantProps<typeof badgeVariants> {
  /** Render the child element instead of a `<span>` — e.g. to make it a link. */
  asChild?: boolean;
}

/**
 * Compact status or category marker.
 *
 * A badge is not a button. If it needs to be clickable, use `asChild` with an
 * anchor so it is announced and focused as a link.
 */
function Badge({ className, variant = 'default', asChild = false, ...props }: BadgeProps) {
  const Comp = asChild ? Slot.Root : 'span';

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  );
}

export { Badge, badgeVariants };