import { cn } from "@/lib/utils";

const STATUS_STYLES: Record<string, string> = {
  'Critical': 'bg-red-600 text-white border-transparent',
  'Reorder Soon': 'bg-yellow-400 text-black border-transparent',
  'Healthy': 'bg-green-600 text-white border-transparent',
  'Overstock': 'bg-teal-700 text-white border-transparent',
  'At Risk': 'border-orange-500 text-orange-600',
  'New': 'bg-green-600 text-white border-transparent',
  'Unknown': 'bg-muted text-muted-foreground border-transparent',
};

interface StatusBadgeProps {
  status: string | null | undefined;
  className?: string;
}

export function StatusBadge({ status, className }: StatusBadgeProps) {
  const displayStatus = status || 'Unknown';
  const styles = STATUS_STYLES[displayStatus] || '';

  return (
    <div
      className={cn(
        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
        styles,
        className
      )}
    >
      {displayStatus}
    </div>
  );
}
