import clsx from 'clsx';

export function StatusBadge({ status, compact = false }: { status: string; compact?: boolean }) {
  const styles: Record<string, string> = {
    pending: 'bg-yellow-100 text-yellow-800',
    confirmed: 'bg-green-100 text-green-800',
    cancelled: 'bg-red-100 text-red-800',
    checked_in: 'bg-blue-100 text-blue-800',
    on_hold: 'bg-slate-100 text-slate-600',
  };
  return (
    <span className={clsx(
      'inline-flex items-center rounded-full font-medium',
      compact ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs',
      styles[status] || 'bg-gray-100 text-gray-800'
    )}>
      {status.replace('_', ' ')}
    </span>
  );
}