/**
 * Badge Component
 * 
 * Small label for status, categories, or metadata
 */

import { type HTMLAttributes, type ReactNode } from 'react';

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'brand' | 'success' | 'warning' | 'info';
  children: ReactNode;
}

export function Badge({ variant = 'default', className = '', children, ...props }: BadgeProps) {
  const baseStyles =
    'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold';

  const variants = {
    default: 'bg-surface-soft text-muted border border-border',
    brand: 'bg-brand-50 text-brand-700',
    success: 'bg-sage-soft text-success',
    warning: 'bg-peach-soft text-warning',
    info: 'bg-blue-50 text-info',
  };

  return (
    <span className={`${baseStyles} ${variants[variant]} ${className}`} {...props}>
      {children}
    </span>
  );
}