import React from "react";

interface DataTableProps {
  headers: string[];
  rows: string[][];
  caption?: string;
}

export default function DataTable({ headers, rows, caption }: DataTableProps) {
  return (
    <div className="my-10 overflow-x-auto rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700">
      <table className="w-full border-collapse">
        {caption && (
          <caption className="bg-gray-50 dark:bg-gray-800 px-6 py-4 text-left text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700">
            {caption}
          </caption>
        )}
        <thead className="bg-gradient-to-r from-brand-green to-emerald-600">
          <tr>
            {headers.map((header, index) => (
              <th
                key={index}
                className={`text-white font-bold p-4 text-left ${
                  index === 0 ? "rounded-tl-xl" : ""
                } ${index === headers.length - 1 ? "rounded-tr-xl" : ""}`}
              >
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-800">
          {rows.map((row, rowIndex) => (
            <tr
              key={rowIndex}
              className="even:bg-gray-50 dark:even:bg-gray-700/50 hover:bg-brand-green/5 dark:hover:bg-brand-green/10 transition-colors"
            >
              {row.map((cell, cellIndex) => (
                <td
                  key={cellIndex}
                  className="p-4 border-b border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300"
                >
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}