/**
 * Detailseite zu "Türen und Klappen geschlossen" - jede Tür einzeln,
 * Motorhaube, Kofferraum. Einzige der vier Sammelzeilen aus Fahrzeugstatus.tsx
 * mit eigener Detailseite. Vorlage: die frühere flache Liste in
 * Fahrzeugstatus.tsx (vor der Aufteilung in vier Sammelzeilen).
 */

import { Tile } from "@audi-dash/ui"

import { useDaten } from "../daten/DatenKontext"
import { Leerzustand } from "./bausteine"

export function TuerenKlappen() {
  const { fahrzeug } = useDaten()
  if (!fahrzeug) return null

  const punkte = fahrzeug.sicherheitscheck.filter((p) => p.gruppe === "tueren_klappen")
  if (punkte.length === 0) {
    return (
      <Leerzustand
        titel="Keine Zustandsdaten"
        text="Das Fahrzeug meldet derzeit keine Tür- oder Klappendaten. Sobald es das tut, stehen sie hier."
      />
    )
  }

  return (
    <Tile>
      <span className="ads-eyebrow">Türen und Klappen</span>
      <ul className="dm-pruefliste">
        {punkte.map((punkt) => (
          <li key={punkt.label} className="dm-pruefliste__zeile">
            <span
              className={
                punkt.ok === true
                  ? "dm-punkt dm-punkt--ok"
                  : punkt.ok === false
                    ? "dm-punkt dm-punkt--offen"
                    : "dm-punkt dm-punkt--unbekannt"
              }
              aria-hidden="true"
            />
            <span className="dm-pruefliste__label">{punkt.label}</span>
            <span className="dm-pruefliste__wert">
              {punkt.ok === true ? "zu" : punkt.ok === false ? "offen" : "unbekannt"}
            </span>
          </li>
        ))}
      </ul>
    </Tile>
  )
}
