'use client'
import { CiCalendar } from "react-icons/ci";
import { PiNoteThin } from "react-icons/pi";
import { MdPayment } from "react-icons/md";
import BlackBtn from '@/app/ui/shared/BlackBtn';
import { useRouter } from 'next/navigation';
import fetchData from "@/api/fetch-data";
import { useEffect } from "react";
export default  function Orders({ data, locale, token }) {
    //   const router =useRouter()
    // NAVIGATE TO THE ORDER DETAILS WHEN CLICK ON IT
    // const handleNavigate = (id) => {
    //     router.push(`/order-details/${id}`); // Navigate to dynamic route with the provided id
    // };
    // useEffect(() => {
    //     
    // }, [data])
    return (
        <></>
        // <section>
        //     <div className=" ">
        //         {/* <UserHeadLines title={'طلباتي'} /> */}
        //         <div className="space-y-5">
        //             {/* Loop through the orders array */}
        //             {data.map((order) => (
        //                 <div key={order.id} className="xl:space-y-5 rounded-2xl p-5 bg-white xl:py-6">
        //                     {/* START TOP */}
        //                     <div className="flex max-md:mb-4 max-md:flex-col max-lg:text-center items-center gap-2 max-lg:justify-between justify-between  max-lg:my-2 xl:gap-5">
        //                         <div className="flex max-md:flex-col flex-wrap max-lg:text-start lg:items-center gap-2  max-lg:my-2 xl:gap-5">
        //                             <div className="flex text-md items-center gap-x-2 ">
        //                                 <CiCalendar className='text-xl' />
        //                                 <h4>{order.date}</h4>
        //                             </div>
        //                             <div className="flex text-md items-center gap-x-2 ">
        //                                 <PiNoteThin className='text-xl' />
        //                                 <h4># ID {order.id}</h4>
        //                             </div>
        //                             <div className="flex text-md items-center gap-x-2 ">
        //                                 <MdPayment className='text-xl' />
        //                                 <h4>{order.paymentMethod}</h4>
        //                             </div>
        //                         </div>
        //                         {/* Navigate to the dynamic route with order id */}
        //                         < BlackBtn className={'ms-auto '} onclick={() => handleNavigate(order.id)} title={'تفاصيل أكثر'} />
        //                     </div>
        //                     {/* END TOP */}
        //                     {/*START SEPERATOR */}
        //                     <div className="p-[.5px]  m-auto bg-gray-200"></div>
        //                     {/*END SEPERATOR */}
        //                     {/* START BOTTOM */}
        //                     <div className="flex flex-wrap max-lg:gap-4 justify-between max-lg:my-2">
        //                         {/* RIGHT SIDE */}
        //                         <div className="flex max-md:flex-col max-md:m-auto  items-center ">
        //                             <div className="flex max-md:flex-col max-md:me-auto  lg:items-center   gap-2 2xl:gap-20 lg:text-center">
        //                                 <div className='max-md:flex items-center gap-1'>
        //                                     <h4 className="lg:mb-2 xl:mb-4">عدد المنتجات</h4>
        //                                     <span className='text-[#747474] text-lg font-extrabold'>{order.productsCount}</span>
        //                                 </div>
        //                                 <div className='max-md:flex items-center gap-1'>
        //                                     <h4 className="lg:mb-2 xl:mb-4">الحالة</h4>
        //                                     <span className="p-2 rounded-sm bg-[#EBE19E]">{order.status}</span>
        //                                 </div>
        //                             </div>
        //                         </div>
        //                         {/* LEFT SIDE */}
        //                         <div className="flex max-md:m-auto gap-x-5 2xl:gap-x-20 items-center xl:me-10 flex-wrap text-center">
        //                             <div className="flex max-md:flex-col gap-3 2xl:gap-x-20  lg:items-center">

        //                                 <h4 className="font-bold text-xl">إجمالي المبلغ</h4>
        //                                 <h4 className="text-[#747474] text-2xl font-extrabold">
        //                                     {order.totalAmount} <span className="font-light">{order.currency}</span>
        //                                 </h4>
        //                             </div>
        //                         </div>
        //                     </div>
        //                     {/* END BOTTOM */}
        //                 </div>
        //             ))}
        //             {/* END CARD */}
        //         </div>
        //     </div >
        // </section >
    )
}
