export type StatusKind = "placed" | "ready" | "picked-up" | "cancelled" | "scheduled" | "in-transit" | "completed" | "low" | "out" | "in-stock" | "hidden";

const STATUS_MAP: Record<StatusKind, { bg: string; fg: string; label: string }> = {
  placed:       { bg: "var(--color-info-soft)",     fg: "var(--color-info)",     label: "Placed" },
  ready:        { bg: "var(--color-warning-soft)",  fg: "var(--color-warning)",  label: "Ready" },
  "picked-up":  { bg: "var(--color-success-soft)",  fg: "var(--color-success)",  label: "Picked up" },
  cancelled:    { bg: "var(--color-surface-2)",     fg: "var(--color-text-muted)", label: "Cancelled" },
  scheduled:    { bg: "var(--color-info-soft)",     fg: "var(--color-info)",     label: "Scheduled" },
  "in-transit": { bg: "var(--color-warning-soft)",  fg: "var(--color-warning)",  label: "In transit" },
  completed:    { bg: "var(--color-success-soft)",  fg: "var(--color-success)",  label: "Completed" },
  low:          { bg: "var(--color-warning-soft)",  fg: "var(--color-warning)",  label: "Low stock" },
  out:          { bg: "var(--color-danger-soft)",   fg: "var(--color-danger)",   label: "Out" },
  "in-stock":   { bg: "var(--color-success-soft)",  fg: "var(--color-success)",  label: "In stock" },
  hidden:       { bg: "var(--color-surface-2)",     fg: "var(--color-text-muted)", label: "Hidden" },
};

interface StatusPillProps {
  status: StatusKind;
  label?: string;
}

export function StatusPill({ status, label }: StatusPillProps) {
  const cfg = STATUS_MAP[status];
  return (
    <span
      className="inline-flex items-center px-2.5 py-1 rounded-full text-label font-semibold"
      style={{ backgroundColor: cfg.bg, color: cfg.fg, letterSpacing: "0.02em", minHeight: "24px" }}
      aria-label={cfg.label}
    >
      {label ?? cfg.label}
    </span>
  );
}

export default StatusPill;
