// @design-system: primitives/Badge
// Registered at /design-system#badge-primitive - Phase 3 (Agent 3E) will render the gallery.

import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { badgeVariants } from './variants';

/** Props for the Badge component */
export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
  dot?: boolean;
}

/**
 * Multideal Badge - inline label with visual weight distinct from Pill.
 *
 * Tones: `success` | `warning` | `danger` | `info` | `neutral` | `brand`
 * Sizes: `sm` | `md`
 * Dot: optional pulsing indicator for live states
 *
 * @example
 * ```tsx
 * <Badge tone="brand" size="sm">{t('new')}</Badge>
 * <Badge tone="success" dot>Active</Badge>
 * ```
 */
export function Badge({ className, tone, size, dot, children, ...props }: BadgeProps) {
  return (
    <span
      className={cn(badgeVariants({ tone, size }), 'inline-flex items-center gap-1.5', className)}
      {...props}
    >
      {dot && (
        <span
          className="mdsp-pulse-dot size-1.5 shrink-0 rounded-full bg-current"
          aria-hidden="true"
          style={{ animation: 'mdsp-badge-pulse 1.4s ease-in-out infinite' }}
        />
      )}
      {children}
    </span>
  );
}