import { MenuWithCheckbox } from "../../components/Elements/Select/cekbox"; // pastikan ini benar
import DrawerAdmin from "../../components/Fragments/DrawerAdmin";
import { RiNewspaperLine } from "react-icons/ri";
import { MenuItem } from "@material-tailwind/react";
import {Checkbox }from "@material-tailwind/react";


const OrderAdmin = () => {
    return (
        <>
            <DrawerAdmin>

                <div className="border flex justify-between mx-2 my-5 items-center rounded-lg">
                    <div className="flex items-center gap-3 mx-2 p-2">
                        <img src="/image/profile.png" alt="" className="w-10" />
                        <p className="text-lg font-bold ">Admin slot</p>
                    </div>
                  
                    <MenuWithCheckbox name={"Status"}>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-1"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-1"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        Finished
                    </label>
                </MenuItem>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-2"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-2"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        Await
                    </label>
                </MenuItem>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-3"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-3"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        Canceled
                    </label>
                </MenuItem>
                    </MenuWithCheckbox>
                      

                </div>
                <div class="flex flex-col bg-white border shadow-sm rounded-xl m-2">
                    <div class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 flex justify-between">
                        <div class="date flex space-x-2">
                            <p class="text-[#939393]">Orders Made :</p>
                            <p>October  20, 2024</p>
                        </div>
                        <div class="status">
                            <p class="font-bold text-black text-md">ORDER NO.250722AD4DCUSP</p>
                        </div>
                    </div>
                    <div class="p-4 md:p-5 grid grid-cols-1 md:grid-cols-12 gap-4">
                        <div class="flex justify-center col-span-4 md:col-span-3">
                            <img
                                src="/public/image/Rectangle 48.png"
                                alt="..."
                                class="max-w-full h-auto"
                            />
                        </div>
                        <div class="flex flex-col justify-center col-span-4 md:col-span-6">
                            <h1 class="font-bold">Exclusive Savva Gift Box | Merchandize</h1>
                            <p>X1</p>
                            <div class="price flex mt-5">
                                <p class="font-bold text-[#AFA0D7] mr-2">$36.00 USD</p>
                                <p class="line-through">$40.00 USD</p>
                            </div>
                        </div>
                        <div class="flex flex-col col-span-3">

                            <button
                                type="button"
                                class="py-2  text-md  rounded-lg border border-blue-500 font-bold text-blue-300 flex justify-center items-center gap-2"
                            >
                                <RiNewspaperLine className="text-2xl" />
                                Show Detail
                            </button>
                        </div>
                    </div>
                    <div class="border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 flex justify-end">
                        <p>Total orders :</p>
                        <p class="text-[#AFA0D7] text-lg font-bold ml-2">24.000</p>
                    </div>
                </div>


            </DrawerAdmin>
        </>
    )
}

export default OrderAdmin