export type ActiveStateRow = {
  label: string;
  value: string;
  tone: "on" | "off" | "warn";
  href?: string;
};

// Ein Blick auf alle Schalter, die beeinflussen, was Besucher:innen sehen oder
// tun können — damit man z. B. einen längst abgelaufenen Banner oder eine noch
// laufende Rabattaktion nicht übersieht.
export function ActiveStatePanel({ rows }: { rows: ActiveStateRow[] }) {
  const dot = (tone: ActiveStateRow["tone"]) =>
    tone === "warn" ? "bg-amber-400" : tone === "on" ? "bg-[var(--rk-accent)]" : "bg-white/25";

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 max-w-2xl mb-8">
      <p className="text-sm font-medium">Was ist gerade aktiv?</p>
      <p className="mt-1 text-xs text-[var(--rk-ink-muted)]">
        Aktueller Stand aller Schalter, die beeinflussen, was Besucher:innen sehen oder tun können.
      </p>
      <ul className="mt-4 flex flex-col divide-y divide-white/10">
        {rows.map((r) => (
          <li key={r.label} className="flex items-center justify-between gap-3 py-2.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">{r.label}</span>
            <span className="flex items-center gap-2 text-right">
              <span className={`h-2 w-2 shrink-0 rounded-full ${dot(r.tone)}`} />
              <span className={r.tone === "off" ? "text-[var(--rk-ink-muted)]" : "text-[var(--rk-ink)]"}>{r.value}</span>
              {r.href && (
                <a href={r.href} className="text-xs text-[var(--rk-ink-muted)] underline hover:text-[var(--rk-ink)]">
                  öffnen
                </a>
              )}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}