import { formatCell } from "../../lib/sqlDumpUtils";

export default function GridTable({ columns, rows }) {
  if (!columns.length) {
    return <p className="px-4 py-6 text-center text-sm text-zinc-600">No columns.</p>;
  }

  return (
    <table className="w-max min-w-full border-collapse">
      <thead>
        <tr>
          {columns.map((column) => (
            <th
              key={column}
              className="sticky top-0 z-10 border-b border-zinc-800/60 bg-zinc-900 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-zinc-500"
            >
              {column}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, rowIndex) => (
          <tr key={rowIndex} className="hover:bg-zinc-800/30">
            {row.map((value, colIndex) => (
              <td
                key={`${rowIndex}-${colIndex}`}
                className="max-w-xs break-words border-b border-zinc-800/40 px-3 py-2 text-sm text-zinc-300"
              >
                {formatCell(value)}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}