import type { Modelonderdeel, StructuurItem } from "@/data/modeldocumenten";

/**
 * Genummerde weergave van de structuur van een modeldocument, met
 * verplicht/facultatief-badge en conditie. Gedeeld tussen het overzicht
 * (ModelKaart) en de statische webpagina per model. `nogTeVertalen` markeert
 * clausules waarvan de vertaling in de andere taal nog ontbreekt in het
 * groen (instructie notaris: NL en FR lopen gelijk, onvertaald = groen).
 */
export function StructuurLijst({
  structuur,
  onderdelen,
  nogTeVertalen,
}: {
  structuur: StructuurItem[];
  onderdelen: Modelonderdeel[];
  nogTeVertalen?: ReadonlySet<string>;
}) {
  return (
    <ol className="space-y-1.5">
      {structuur.map((item, i) => {
        const onderdeel = onderdelen.find((o) => o.id === item.onderdeelId);
        return (
          <li key={`${item.onderdeelId}-${i}`} className="text-sm flex gap-2 items-baseline">
            <span className="text-slate-400 text-xs w-5 shrink-0">{i + 1}.</span>
            <div>
              {onderdeel ? (
                <span className="text-slate-800">{onderdeel.titel}</span>
              ) : (
                <span className="text-red-600">Ontbrekend onderdeel: {item.onderdeelId}</span>
              )}
              <span
                className={`ml-2 text-xs px-1.5 py-0.5 rounded-md ${
                  item.verplicht ? "bg-slate-100 text-slate-500" : "bg-amber-50 text-amber-700"
                }`}
              >
                {item.verplicht ? "verplicht" : "facultatief"}
              </span>
              {nogTeVertalen?.has(item.onderdeelId) && (
                <span className="ml-2 text-xs px-1.5 py-0.5 rounded-md bg-emerald-100 text-emerald-800">
                  FR nog te vertalen
                </span>
              )}
              {item.conditie && <span className="ml-2 text-xs text-slate-400">{item.conditie}</span>}
            </div>
          </li>
        );
      })}
    </ol>
  );
}