import React from "react";

const Table = ({ tableData }) => {

  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse shadow-sm rounded-lg overflow-hidden bg-white dark:bg-[#3c4043] transition-colors duration-200">
        <thead className="bg-gray-100 dark:bg-[#303134]">
          <tr className="text-left">
            <th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
              ID
            </th>
            <th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
              Stream
            </th>
            <th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
              Scholarship
            </th>
            <th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
              Funds
            </th>
          </tr>
        </thead>
        <tbody>
          {tableData?.map((row) => (
            <tr
              key={row.id}
              className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              <td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
                {row.id}
              </td>
              <td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
                {row.Stream}
              </td>
              <td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
                {row.Scholarship}
              </td>
              <td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
                {row.Funds}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;
