'use client';
const EarningTable = ({data}:any) => {

  const handleDate=(date:any)=>{
    const timestamp = date;
  const datee = new Date(timestamp);
  const dateString = datee.toLocaleDateString()
  return dateString
  }
  const handleTime=(date:any)=>{
    const timestamp = date*1000;
  const datee = new Date(timestamp);
  const timeString = datee.toLocaleTimeString();
  return timeString
  }
  
    return (
      <div className="w-full h-[83%] 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-[15%]">
                  Orders ID
                </th>
                {/* <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[17%]">
                  Users
                </th> */}
                <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[17%]">
                 Date
                </th>
                <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[17%]">
                 Time
                </th>
                <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[17%]">
                  Earning
                </th>
                <th className="px-6 py-4 text-left text-sm font-medium text-[#828282] w-[17%]">
                  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, index:number) => (
                <tr key={index}>
                  <td className="px-6 py-4 text-sm text-[#252525] w-[15%]">{item?.order?.order_id}</td>
                  {/* <td className="px-6 py-4 w-[17%]">
                    <div className="text-sm text-[#252525]">Ralph Edwards</div>
                  </td> */}
                  <td className="px-6 py-4 text-sm text-[#252525] w-[17%]">{handleDate(item?.order_placed_at)}</td>
                  <td className="px-6 py-4 text-sm text-[#252525] w-[17%]">
                   {handleTime(item?.order_placed_at)}
                  </td>
                  <td className="px-6 py-4 text-sm text-[#188A42] w-[17%]">
                    +${item?.restaurant_earning}
                  </td>
                  <td className="px-6 py-4 text-sm text-[#188A42] w-[17%]">
                  {item?.order?.order_status}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  };
  
  export default EarningTable;