import type { AuditChange } from "@/lib/types";

// Was sich geändert hat, feldweise — im Protokoll und in der Historie einer
// Person dieselbe Darstellung. Zwei Ansichten derselben Sache verschieden zu
// setzen, hiesse dass jemand sie zweimal lesen lernen muss.

/** Leerer Wert heisst „war nicht gesetzt“ — und das ist eine Aussage. */
function Wert({ text, art }: { text: string | null; art: "vorher" | "nachher" }) {
  if (text === null || text === "") {
    return <span className="text-ink-muted italic">leer</span>;
  }
  return <span className={art === "vorher" ? "text-ink-muted line-through decoration-ink-muted/40" : "text-ink"}>{text}</span>;
}

export function AenderungsTabelle({ changes }: { changes: AuditChange[] }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-border text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
            <th className="py-2 pr-4">Feld</th>
            <th className="py-2 pr-4">Vorher</th>
            <th className="py-2">Nachher</th>
          </tr>
        </thead>
        <tbody>
          {changes.map((c, i) => (
            <tr key={`${c.feld}-${i}`} className="border-b border-border-subtle align-top last:border-0">
              <td className="py-2 pr-4 font-semibold text-ink-body">{c.feld}</td>
              <td className="py-2 pr-4">
                <Wert text={c.vorher} art="vorher" />
              </td>
              <td className="py-2">
                <Wert text={c.nachher} art="nachher" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}