import type { Pill as PillData, PillIcon } from "../logic/pills";
import { SolidBadge, StatusPill, type IconName, type Tone } from "./kit";

const icons: Record<PillIcon, IconName> = {
  sent: "send-plane-fill",
  ringing: "phone-fill",
  live: "live-fill",
  completed: "checkbox-circle-fill",
  missed: "arrow-left-down-fill",
  later: "time-fill",
  not_reached: "hourglass-fill",
  expired: "hourglass-fill",
  declined: "forbid-fill",
  identity: "user-forbid-fill",
  ended_early: "stop-circle-fill",
  cancelled: "close-circle-fill",
  urgent: "alarm-warning-fill",
  queued: "hourglass-2-fill",
  reading: "refresh-fill",
  read: "file-text-fill",
  failed: "error-warning-fill",
  held_back: "spam-2-fill",
  connected: "plug-fill",
  paused: "pause-circle-fill",
  stopped: "link-unlink",
  clinic: "hospital-fill",
  draft: "draft-fill",
};

/**
 * A tinted state pill: its own icon and colour, and always its words, so colour is never the only signal.
 * Urgent is the one loud flag, solid red, as it sits beside a state rather than being one.
 */
export function Pill({ pill, title, size }: { pill: PillData; title?: string; size?: "sm" | "md" }) {
  const meaning = title ?? (pill.meaning || undefined);
  if (pill.icon === "urgent")
    return (
      <span title={meaning} className="inline-flex">
        <SolidBadge tone="red" icon={icons.urgent}>
          {pill.label}
        </SolidBadge>
      </span>
    );
  const tone: Tone = pill.tone === "red-outline" ? "red" : pill.tone;
  return (
    <StatusPill tone={tone} outline={pill.tone === "red-outline"} icon={icons[pill.icon]} size={size} title={meaning}>
      {pill.label}
    </StatusPill>
  );
}