import * as React from "react";
import { cn } from "@/lib/utils";
import { de } from "@/lib/i18n/de";

export interface Column<T> {
  key: string;
  header: string;
  render: (row: T) => React.ReactNode;
  className?: string;
}

/**
 * Schlanke, server-renderbare Tabelle für Admin-Listen. Generisch über den
 * Zeilentyp, keine Client-Interaktivität — Aktionen werden als `render`-Zellen
 * (eigene Client-Komponenten) eingehängt. Empty-State (Querschnittsstandard 10).
 */
export function DataTable<T>({
  columns,
  rows,
  getRowKey,
  emptyText = de.admin.keineEintraege,
}: {
  columns: Column<T>[];
  rows: T[];
  getRowKey: (row: T) => string;
  emptyText?: string;
}) {
  if (rows.length === 0) {
    return (
      <p className="rounded border border-rand bg-white px-4 py-6 text-sm text-anthrazit/60">
        {emptyText}
      </p>
    );
  }
  return (
    <div className="overflow-x-auto rounded border border-rand bg-white">
      <table className="w-full border-collapse text-sm">
        <thead>
          <tr className="border-b border-rand text-left">
            {columns.map((c) => (
              <th
                key={c.key}
                scope="col"
                className={cn(
                  "px-4 py-2 font-medium text-anthrazit/70",
                  c.className,
                )}
              >
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr
              key={getRowKey(row)}
              className="border-b border-rand/60 last:border-0 hover:bg-nebel/60"
            >
              {columns.map((c) => (
                <td
                  key={c.key}
                  className={cn("px-4 py-2 align-top", c.className)}
                >
                  {c.render(row)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}