const statusStyles: Record<string, string> = {
    pending: "ci-status-pending",
    queued: "ci-status-queued",
    running: "ci-status-running",
    success: "ci-status-success",
    failure: "ci-status-failure",
    warning: "ci-status-warning",
    cancelled: "ci-status-cancelled",
    skipped: "ci-status-skipped",
};

interface CiStatusPillProps {
    status: string;
    title?: string;
}

export function CiStatusPill({ status, title }: CiStatusPillProps) {
    const cls = statusStyles[status] ?? "ci-status-pending";
    return (
        <span class={`ci-status-pill ${cls}`} title={title} safe>
            {status}
        </span>
    );
}