import { StatusBadge } from "@govoplan/core-webui";

import { humanize } from "../utils/campaignView";

export type DeliverabilityPreflightItem = {
  label: string;
  detail: string;
  state: "ready" | "warning" | "blocked" | "info";
};

export default function DeliverabilityPreflight({
  items
}: {
  items: DeliverabilityPreflightItem[];
}) {
  return (
    <section className="deliverability-preflight" aria-label="Deliverability preflight">
      <div className="deliverability-preflight-header">
        <h3>Deliverability preflight</h3>
        <span className="muted small-note">Operator checks before the first live send.</span>
      </div>
      <div className="deliverability-preflight-grid">
        {items.map((item) => (
          <div
            key={item.label}
            className="deliverability-preflight-item"
            data-state={item.state}
          >
            <div>
              <span>{item.label}</span>
              <strong>{item.detail}</strong>
            </div>
            <StatusBadge
              status={
                item.state === "blocked"
                  ? "failed"
                  : item.state === "warning"
                    ? "warning"
                    : item.state === "ready"
                      ? "ready"
                      : "info"
              }
              label={humanize(item.state)}
            />
          </div>
        ))}
      </div>
    </section>
  );
}