import { Icons } from '../icons/Icons';
import { stockColor, stockLabel } from '../../utils/helpers';

const colorMap = {
  Paid: 'bg-gr/15 text-gr',
  confirmed: 'bg-gr/15 text-gr',
  cancelled: 'bg-t3/15 text-t3',
  refunded: 'bg-yl/15 text-yl',
  shipped: 'bg-ac/15 text-ac',
  processing: 'bg-or/15 text-or',
};

export function Badge({ s }) {
  return (
    <span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-bold ${colorMap[s] || 'bg-t3/15 text-t3'}`}>
      {s}
    </span>
  );
}

export function VipBadge() {
  return (
    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-gold/15 text-gold">
      <Icons.Crown />VIP
    </span>
  );
}

export function StockBadge({ q, t }) {
  const c = stockColor(q, t);
  const label = stockLabel(q, t);
  const cls = {
    rd: 'bg-rd/15 text-rd',
    yl: 'bg-yl/15 text-yl',
    gr: 'bg-gr/15 text-gr',
  };
  return (
    <span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-bold ${cls[c]}`}>
      {q} — {label}
    </span>
  );
}

export function ClientName({ client: c }) {
  if (!c) return <span className="font-semibold">?</span>;
  if (c.is_vip) {
    return (
      <span className="text-gold font-bold inline-flex items-center gap-1">
        <Icons.Crown />{c.name}
      </span>
    );
  }
  return <span className="font-semibold">{c.name}</span>;
}
