const DataTable = ({ data }: any) => {
  return (
    <div className="w-full h-[70%] flex flex-col bg-white rounded-lg shadow-lg shadow-gray-500/50 overflow-hidden">
      {/* Table Header (Fixed) */}
      <div className="overflow-hidden">
        <table className="w-full">
          <thead className="bg-[#FAFAFA] text-[#828282] sticky top-0 z-10">
            <tr>
              <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[20%]">
                Orders ID
              </th>
              <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[20%]">
                Customer name
              </th>
              <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[20%]">
                Total Bill
              </th>
              <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[20%]">
                Driver assigned to
              </th>
              <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[20%]">
                Status
              </th>
            </tr>
          </thead>
        </table>
      </div>

      {/* Scrollable Table Body */}
      <div className="flex-1 overflow-y-auto">
        <table className="w-full">
          <tbody className="divide-y divide-gray-200">
            {data?.length > 0 && data.map((item: any) => (
              <tr key={item?._id}>
                <td className="px-6 py-4 text-sm text-[#252525] w-[20%]">{item?.order_id}</td>
                <td className="px-6 py-4 w-[20%]">
                  {item?.customer_id?.name}
                </td>
                <td className="px-6 py-4 text-sm text-[#252525] w-[20%]">${item?.total_amount}</td>
                <td className="px-6 py-4 text-sm text-[#252525] w-[20%]">
                  {item?.driver_id?.name ?? "Assigning Driver soon"}
                </td>
                <td className="px-6 py-4">
                  <button className={`h-[50px] px-6 py-2 ${item?.order_status !== "delivered" ? "text-[#121212] bg-yellow-400" : "text-[#fff] bg-green-400"} rounded-lg text-[14px] font-[600] hover:bg-yellow-500 transition-colors`}>
                    {item?.order_status}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default DataTable;