import clsx from "clsx";
import type { LicenceState } from "@/lib/format";

const LABEL: Record<LicenceState, string> = {
    valid: "Valid",
    warn: "Expiring",
    expired: "Expired",
    none: "Awaiting link",
};

/*
 * State reads three ways: this pill's colour, the pill's SHAPE, and the label.
 * Colour alone would fail a colourblind reader on the one screen where getting
 * it wrong costs money.
 */
const SHAPE: Record<LicenceState, string> = {
    valid: "rounded-full",
    warn: "[clip-path:polygon(50%_0,100%_100%,0_100%)]",
    expired: "[clip-path:polygon(20%_0,80%_0,100%_20%,100%_80%,80%_100%,20%_100%,0_80%,0_20%)]",
    none: "rounded-none",
};

const TONE: Record<LicenceState, string> = {
    valid: "border-valid text-valid",
    warn: "border-warn text-warn",
    expired: "border-expired text-expired",
    none: "border-accent text-accent",
};

export function StatePill({ state }: { state: LicenceState }) {
    return (
        <span
            className={clsx(
                "inline-flex shrink-0 items-center gap-1.5 rounded-sm border bg-panel px-2 py-0.5 font-mono text-[0.72rem] uppercase tracking-[0.08em]",
                TONE[state],
            )}
        >
            <i className={clsx("h-1.5 w-1.5 shrink-0 bg-current", SHAPE[state])} />
            {LABEL[state]}
        </span>
    );
}