import React from "react";

type TableProps = {
  headers: string[];
  rows: React.ReactNode[][];
};

export default function Table({ headers, rows }: TableProps) {
  return (
    <div className="w-full overflow-hidden rounded-2xl border border-slate-800 bg-[#0B1727] shadow-xl">
      <div className="overflow-x-auto">
        <table className="w-full border-collapse text-[12px]">
          <thead>
            <tr className="border-b border-slate-800 uppercase tracking-[0.12em] text-[10px] text-slate-500">
              {headers.map((header, index) => (
                <th
                  key={index}
                  className={`px-5 py-4 font-semibold whitespace-nowrap ${
                    index === headers.length - 1
                      ? "text-center"
                      : "text-left"
                  }`}
                >
                  {header}
                </th>
              ))}
            </tr>
          </thead>

          <tbody className="divide-y divide-slate-800/70">
            {rows.map((row, rowIndex) => (
              <tr
                key={rowIndex}
                className="transition-colors duration-200 hover:bg-slate-800/30"
              >
                {row.map((cell, cellIndex) => (
                  <td
                    key={cellIndex}
                    className={`px-5 py-4 text-[12px] text-slate-300 whitespace-nowrap ${
                      cellIndex === row.length - 1
                        ? "text-center"
                        : "text-left"
                    }`}
                  >
                    {cell}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}