import React from "react";

export const DataTable = ({ columns, data, renderCell }) => {
  return (
    <div className="overflow-hidden rounded-[18px]">
      <table className="w-full border-separate border-spacing-0">
        <thead>
          <tr>
            {columns.map((col, idx) => (
              <th
                key={idx}
                className="border-b border-[var(--line)] bg-white/2 px-3 py-3 text-left text-xs font-semibold text-[var(--muted)]"
              >
                {col}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIdx) => (
            <tr key={rowIdx}>
              {columns.map((col, colIdx) => (
                <td
                  key={colIdx}
                  className="whitespace-nowrap border-b border-[var(--line)] px-3 py-3 text-xs text-[var(--text)] last:border-b-0"
                >
                  {renderCell ? renderCell(col, row, rowIdx) : row[col]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
