import type { HTMLAttributes } from 'react';

type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'brand';

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
}

const variantClasses: Record<BadgeVariant, string> = {
  default: 'bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)]',
  success: 'bg-[var(--color-success-light)] text-[var(--color-success-dark,#15803d)]',
  warning: 'bg-[var(--color-warning-light)] text-[var(--color-warning-dark,#b45309)]',
  error:   'bg-[var(--color-error-light)] text-[var(--color-error-dark,#b91c1c)]',
  brand:   'bg-[var(--color-brand-100)] text-[var(--color-brand-700)]',
};

export function Badge({ variant = 'default', className = '', children, ...props }: BadgeProps) {
  return (
    <span
      {...props}
      className={[
        'inline-flex items-center rounded-[var(--radius-full)] px-2.5 py-0.5 text-xs font-medium',
        variantClasses[variant], className,
      ].join(' ')}
    >
      {children}
    </span>
  );
}