import { cn } from "cn"
import type { Lampe as LampenDaten, LampenZustand } from "@/lib/typen"

// Warnlampen wie im Flugzeug: Grün = läuft, dunkel = aus/auf Abruf, Bernstein = kümmern,
// Cyan = Info, Rot = Störung. Bernstein und Rot leuchten, alles andere bleibt ruhig.
const LAMPEN_STIL: Record<LampenZustand, { feld: string; name: string; wert: string }> = {
  ok: { feld: "border-gruen-rand bg-gruen-grund", name: "text-gruen", wert: "text-gruen-text" },
  aus: { feld: "border-aus-rand bg-aus-grund", name: "text-aus-text", wert: "text-text-3" },
  warn: { feld: "border-bernstein bg-bernstein-lampe lampe-atmet", name: "text-bernstein", wert: "text-[#f2c46b]" },
  info: { feld: "border-cyan-rand bg-cyan-grund", name: "text-cyan", wert: "text-cyan-text" },
  fehler: {
    feld: "border-rot bg-rot-grund shadow-[0_0_18px_rgba(255,90,79,0.35)]",
    name: "text-rot",
    wert: "text-rot-text",
  },
}

const ZUSTAND_TEXT: Record<LampenZustand, string> = {
  ok: "in Ordnung",
  aus: "aus",
  warn: "braucht Aufmerksamkeit",
  info: "Info",
  fehler: "Störung",
}

export function Lampe({ lampe }: { lampe: LampenDaten }) {
  const stil = LAMPEN_STIL[lampe.zustand] ?? LAMPEN_STIL.aus
  return (
    <li
      className={cn(
        "flex min-h-[58px] flex-col items-center justify-center gap-0.5 rounded-lg border px-2 py-2 text-center",
        stil.feld,
      )}
    >
      <span className={cn("schild text-[17px] leading-none font-bold tracking-[0.18em]", stil.name)}>
        {lampe.label}
      </span>
      <span className={cn("ziffern text-xs uppercase", stil.wert)}>{lampe.wert}</span>
      <span className="sr-only">{ZUSTAND_TEXT[lampe.zustand]}</span>
    </li>
  )
}