'use client';

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-sm border px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1.5 [&>svg]:pointer-events-none focus-visible:border-ink focus-visible:ring-2 focus-visible:ring-ink/20 transition-all duration-fast ease-out',
  {
    variants: {
      variant: {
        default: 'bg-brand text-white border-transparent',
        secondary:
          'bg-bg-secondary text-text-secondary border-border-primary',
        outline:
          'border-border-accent text-text-primary bg-transparent',
        ghost: 'text-text-muted hover:text-text-primary hover:bg-bg-secondary',
        /* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
        success: 'bg-success/10 text-success-text border-transparent',
        warning: 'bg-warning/10 text-warning-text border-transparent',
        error: 'bg-error/10 text-error border-transparent',
        info: 'bg-info/10 text-info-text border-transparent',
      },
      size: {
        sm: 'px-2 py-0.5 text-[10px]',
        default: 'px-2.5 py-1 text-xs',
        lg: 'px-3 py-1.5 text-sm',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

function Badge({
  className,
  variant = 'default',
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span';

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

export { Badge, badgeVariants };