BillTracker/client/components/StatusBadge.jsx

import React, { useMemo } from 'react';
import { AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';

const STATUS_META = {
  paid:      { label: 'Paid',      cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:bg-emerald-300/10 dark:text-emerald-200 dark:border-emerald-300/30' },
  upcoming:  { label: 'Upcoming',  cls: 'bg-secondary text-muted-foreground border border-border' },
  due_soon:  { label: 'Due Soon',  cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:bg-amber-300/10 dark:text-amber-200 dark:border-amber-300/28' },
  late:      { label: 'Late',      cls: 'bg-orange-500/30 text-orange-800 border border-orange-500/60 shadow-sm shadow-orange-950/10 dark:bg-orange-400/25 dark:text-orange-100 dark:border-orange-300/60' },
  missed:    { label: 'Missed',    cls: 'bg-rose-500/30 text-rose-800 border border-rose-500/70 shadow-sm shadow-rose-950/10 dark:bg-rose-400/25 dark:text-rose-100 dark:border-rose-300/60' },
  autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:bg-sky-300/10 dark:text-sky-200 dark:border-sky-300/28' },
  skipped:   { label: 'Skipped',   cls: 'bg-muted text-muted-foreground border border-border' },
};

export const StatusBadge = React.memo(function StatusBadge({ status }) {
  const meta = useMemo(() => STATUS_META[status] || STATUS_META.upcoming, [status]);
  const isUrgent = status === 'late' || status === 'missed';
  return (
    <span className={cn(
      'inline-flex items-center px-2.5 py-0.5 text-[11px] rounded-md font-semibold',
      'uppercase tracking-wide whitespace-nowrap',
      isUrgent && 'gap-1.5 py-1 text-xs',
      meta.cls,
    )}>
      {isUrgent && <AlertCircle className="h-3.5 w-3.5" />}
      {meta.label}
    </span>
  );
});

StatusBadge.displayName = 'StatusBadge';