function renderCell(cell: React.ReactNode) {
  if (typeof cell === "string" || typeof cell === "number") {
    const text = String(cell);
    return <span className="admin-cell-text" title={text}>{cell}</span>;
  }
  return cell;
}

function columnClass(header: string) {
  return header === "Actions" ? "admin-actions-column" : "";
}

export function DataTable({ headers, rows, rowClassNames }: { headers: string[]; rows: React.ReactNode[][]; rowClassNames?: string[] }) {
  return (
    <div className="panel admin-table-panel">
      <div className="admin-table-scroll">
        <table className="admin-data-table">
          <thead>
            <tr>{headers.map((header) => <th key={header} className={columnClass(header)}>{header}</th>)}</tr>
          </thead>
          <tbody>
            {rows.length ? rows.map((row, index) => (
              <tr key={index} className={rowClassNames?.[index] || ""}>{row.map((cell, cellIndex) => <td key={cellIndex} className={columnClass(headers[cellIndex])}>{renderCell(cell)}</td>)}</tr>
            )) : (
              <tr><td colSpan={headers.length} className="text-center text-[#666]">No records yet.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}