import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn.ts';

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'accent' | 'danger' | 'warning' | 'success' | 'muted';
  children: ReactNode;
}

export function Badge({ variant = 'default', className, children, ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center rounded-[5px] border px-1.5 py-px text-[8px] font-extrabold leading-none tracking-wide',
        variant === 'default' && 'border-white/8 bg-wing-muted/22 text-white',
        variant === 'accent' && 'border-wing-accent/70 bg-wing-accent/22 text-white',
        variant === 'danger' && 'border-wing-danger/70 bg-wing-danger/22 text-white',
        variant === 'warning' && 'border-wing-warning/70 bg-wing-warning/22 text-white',
        variant === 'success' && 'border-wing-success/70 bg-wing-success/22 text-white',
        variant === 'muted' && 'border-wing-border/90 bg-wing-card/55 text-wing-muted font-bold',
        className,
      )}
      {...props}
    >
      {children}
    </span>
  );
}