import type { ReactNode } from "react";

type Column = { key: string; label: string; className?: string };

type Props = {
  columns: Column[];
  rows: Record<string, ReactNode>[];
  minWidth?: number;
};

export default function SpecTable({ columns, rows, minWidth = 520 }: Props) {
  return (
    <div className="overflow-x-auto rounded-xl border border-gray-100">
      <table className="w-full divide-y divide-gray-100 text-sm" style={{ minWidth }}>
        <thead className="bg-gray-50 text-left text-xs font-semibold text-gray-500">
          <tr>
            {columns.map((column) => (
              <th key={column.key} className={`px-4 py-3 ${column.className ?? ""}`}>
                {column.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {rows.map((row, index) => (
            <tr key={index} className="hover:bg-gray-50">
              {columns.map((column) => (
                <td key={column.key} className={`px-4 py-3 text-gray-600 ${column.className ?? ""}`}>
                  {row[column.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}