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

const styles: Record<string, string> = {
  OPEN: 'bg-yellow-50 text-yellow-700 ring-yellow-200',
  ANSWERED: 'bg-blue-50 text-brand-700 ring-brand-200',
  SOLVED: 'bg-green-50 text-green-700 ring-green-200',
};

const labels: Record<string, string> = {
  OPEN: 'Open',
  ANSWERED: 'Answered',
  SOLVED: 'Solved',
};

export function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className={cn(
        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset',
        styles[status] ?? 'bg-gray-50 text-gray-700 ring-gray-200'
      )}
    >
      {labels[status] ?? status}
    </span>
  );
}