import type { AdminTableMeta } from "@xtablo/shared-types";

type AdminGridProps = {
  meta: AdminTableMeta | null;
  onSelectRow: (row: Record<string, string | boolean | null>) => void;
  rows: Record<string, string | boolean | null>[];
  selectedRowId: string | null;
};

export function AdminGrid({ meta, onSelectRow, rows, selectedRowId }: AdminGridProps) {
  if (!meta) {
    return null;
  }

  return (
    <div className="overflow-hidden rounded-3xl border border-border bg-card">
      <table className="min-w-full border-collapse">
        <thead>
          <tr className="border-b border-border bg-black/5 text-left">
            {meta.columns.map((column) => (
              <th className="px-4 py-3 text-sm font-medium" key={column.id}>
                {column.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr
              className={`cursor-pointer border-b border-border/60 last:border-b-0 ${
                String(row[meta.primaryKey] ?? "") === selectedRowId ? "bg-black/5" : ""
              }`}
              key={`${row[meta.primaryKey] ?? row.id ?? index}`}
              onClick={() => onSelectRow(row)}
            >
              {meta.columns.map((column) => (
                <td className="px-4 py-3 text-sm" key={column.id}>
                  {String(row[column.id] ?? "")}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
