'use client';

import { useGlobalContext } from "@/context/Provider";
import RadioCheck from "../../assets/images/radioCheck.png"

const OrderDetail = () => {
    const { orderInfo } = useGlobalContext()
    // console.log('orderInfo', orderInfo)
    return orderInfo && (
        <div className="mx-auto mt-3 max-w-2xl space-y-8 h-[88vh] overflow-y-scroll no-scrollbar ">
            <span className="text-[#000] font-[400] text-[16px]">Our friendly support team is here to help you.</span>
            <div className="flex flex-col bg-white shadow-lg rounded-lg shadow-gray-500/50 border border-gray-100">

                {orderInfo?.cart_items?.length > 0 && orderInfo?.cart_items.map((item: any) => {
                    return (
                        <div key={item?.name} className="flex flex-col border-b-2 p-4">
                            <div className="flex flex-row justify-between items-center">
                                <div className="flex flex-col justify-center items-center">
                                    <div className="flex flex-row gap-2">
                                        <div className="w-[10px] h-[10px] mt-[5px]"> <img src={RadioCheck.src} width={10} height={10} /></div>
                                        <div className="flex flex-col items-start">
                                            <span className="text-[16px] font-[600] text-[#121212]">{item.no_of_quantity} x {item.name}</span>
                                            <span className="text-[#808080] font-[400] text-[16px]">{item?.quantity?.name}</span>
                                        </div>

                                    </div>
                                </div>

                                <div className="text-[#808080] font-[400] text-[16px]">${item?.price}</div>
                            </div>
                            <div className="flex flex-col gap-2 mt-2">
                                <span className="text-[hsl(var(--primary))] font-[500] text-[14px]">Cooking request</span>
                                <span className="text-[#121212] font-[400] text-[16px]">{item?.cooking_req?.length > 0 ? item?.cooking_req : "None"}</span>
                            </div>
                        </div>
                    )
                })}
                <div className="flex flex-col gap-2 p-4">
                    <span className="text-[hsl(var(--primary))] font-[500] text-[14px]">Note for restaurant</span>
                    <span className="text-[#121212] font-[400] text-[16px]">{orderInfo?.note_for_restaurant?.length > 0 ? orderInfo?.note_for_restaurant : "None"}</span>
                </div>
            </div>
            <div className="flex flex-col shadow-lg rounded-lg shadow-gray-500/50 border border-gray-100 p-2">
                <span className="text-[#121212] font-[600] text-[18px] p-4">Receiver’s Details</span>
                <div className="flex flex-col gap-2 p-4">
                    <span className="text-[hsl(var(--primary))] font-[500] text-[14px]">{orderInfo?.add_receiver_detail?.name}</span>
                    <span className="text-[#121212] font-[400] text-[16px]">{orderInfo?.delivery_address?.name}</span>
                </div>
            </div>
        </div>
    )
}
export default OrderDetail;