'use client';

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

const STYLES: Record<string, string> = {
  requested: 'bg-gray-100 text-gray-700 border-gray-300',
  pending: 'bg-yellow-100 text-yellow-800 border-yellow-300',
  approved: 'bg-blue-100 text-blue-700 border-blue-300',
  paid: 'bg-green-100 text-green-700 border-green-300',
  rejected: 'bg-red-100 text-red-700 border-red-300',
  cancelled: 'bg-gray-100 text-gray-500 border-gray-300 line-through',
  published: 'bg-green-100 text-green-700 border-green-300',
  draft: 'bg-gray-100 text-gray-700 border-gray-300',
  archived: 'bg-zinc-200 text-zinc-600 border-zinc-300',
};

export function StatusPill({ status }: { status: string }) {
  const key = (status ?? '').toLowerCase();
  const styles = STYLES[key] ?? STYLES.requested;
  return (
    <span
      className={cn(
        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize',
        styles,
      )}
    >
      {status}
    </span>
  );
}