import React from "react";

const Table = ({ columns = [], data = [], actions }) => {
  return (
    <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
      <table className="min-w-full text-sm text-center">
        {" "}
        {/* <-- text-center added */}
        <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
          <tr>
            {columns.map((col) => (
              <th key={col.key} className="px-6 py-3 text-center">
                {col.label}
              </th>
            ))}
            {actions && <th className="px-6 py-3 text-center">Action</th>}
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr
              key={row.id || index}
              className="border-t hover:bg-gray-50 transition-colors"
            >
              {columns.map((col) => (
                <td
                  key={col.key}
                  className="px-6 py-3 text-gray-700 text-center"
                >
                  {col.render
                    ? col.render(row[col.key], row, index) // pass index here
                    : row[col.key]}
                </td>
              ))}

              {actions && (
                <td className="px-6 py-3 text-center flex items-center justify-center gap-2">
                  {actions(row)}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;