Badge

'use client';

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

export type BadgeVariant = 'default' | 'outline' | 'soft' | 'solid';
/** Meaning of a status badge. Colors soft and outline badges and the dot of a default badge, solid stays on the accent. */
export type BadgeTone = 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';

const VARIANT: Record<BadgeVariant, string> = {
  default: 'bg-muted text-foreground',
  outline: 'border border-border-strong text-muted-foreground',
  soft: 'bg-[color-mix(in_oklab,var(--primary)_12%,transparent)] text-[color-mix(in_oklab,var(--primary)_80%,var(--foreground))]',
  solid: 'bg-primary text-primary-foreground',
};

const TONE: Record<Exclude<BadgeTone, 'accent'>, { color: string; text: string }> = {
  neutral: { color: 'var(--muted-foreground)', text: 'text-muted-foreground' },
  success: { color: 'var(--success)', text: 'text-success-foreground' },
  warning: { color: 'var(--warning)', text: 'text-warning-foreground' },
  danger: { color: 'var(--destructive)', text: 'text-destructive' },
  info: { color: 'var(--info)', text: 'text-info' },
};

const TONED: Partial<Record<BadgeVariant, string>> = {
  soft: 'bg-[color-mix(in_oklab,var(--badge)_15%,transparent)]',
  outline: 'border border-[color-mix(in_oklab,var(--badge)_45%,var(--border))]',
};

const SIZE = {
  sm: 'h-5 gap-1 px-2 text-[11px] tabular-nums',
  md: 'h-6 gap-1.5 px-2.5 text-xs',
};

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  /** A pulsing point in front */
  dot?: boolean;
  /** Status meaning: success, warning, danger, info or neutral. Default the accent. */
  tone?: BadgeTone;
  /** sm for counts in tabs and navigation, md the default */
  size?: 'sm' | 'md';
  className?: string;
  children: React.ReactNode;
}

/** Small label for status, category or "New". With dot it gets a pulsing point in front, with tone a status color. */
export function Badge({ variant = 'default', dot, tone, size = 'md', className, style, children, ...rest }: BadgeProps) {
  const t = tone && tone !== 'accent' ? TONE[tone] : undefined;
  const toned = t && TONED[variant];
  return (
    <span
      {...rest}
      style={t ? ({ '--badge': t.color, ...style } as React.CSSProperties) : style}
      className={cn('inline-flex items-center whitespace-nowrap rounded-full font-medium', SIZE[size], toned ? cn(toned, t.text) : VARIANT[variant], className)}
    >
      {dot && (
        <span className={cn('relative flex size-1.5', t && !toned && variant === 'default' && t.text)} aria-hidden>
          <span className="absolute inset-0 animate-kit-pulse rounded-full bg-current motion-reduce:animate-none" />
          <span className="relative size-1.5 rounded-full bg-current" />
        </span>
      )}
      {children}
    </span>
  );
}