import { t } from "@/lib/i18n/de";
import { toEckdaten, type MerkmalRow } from "@/lib/detail/merkmale";

/**
 * Zeigt die typisierten Eckdaten als Definitionsliste. Leere Liste => deutscher
 * Empty-State (Querschnittsstandard 10). Die Formatierung (de-AT, NBSP, Ja/Nein,
 * enum-Label, „–") übernimmt `toEckdaten`/`formatMerkmal`.
 */
export function EckdatenGrid({ rows }: { rows: MerkmalRow[] }) {
  const eckdaten = toEckdaten(rows);

  if (eckdaten.length === 0) {
    return (
      <section>
        <h2 className="text-sm font-semibold text-navy">{t("detail.eckdaten")}</h2>
        <p className="mt-2 text-sm text-anthrazit/60">{t("detail.keineEckdaten")}</p>
      </section>
    );
  }

  return (
    <section>
      <h2 className="text-sm font-semibold text-navy">{t("detail.eckdaten")}</h2>
      <dl className="mt-3 grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2">
        {eckdaten.map((e) => (
          <div
            key={e.merkmalId}
            className="flex items-baseline justify-between gap-3 border-b border-rand/60 py-1.5"
          >
            <dt className="text-sm text-anthrazit/70">{e.label}</dt>
            <dd className="text-sm font-medium tabular-nums text-anthrazit">
              {e.wert}
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
}
