import React, { Children } from 'react';
import { LuLayoutDashboard } from "react-icons/lu";
import { FaChartLine } from "react-icons/fa";
import { FaClipboardUser } from "react-icons/fa6";
import { RiCustomerService2Fill } from "react-icons/ri";
import { IoPeople } from "react-icons/io5";
import { FaBox } from "react-icons/fa";
import Search from '../../components/Elements/Search'
import { IoIosNotifications } from "react-icons/io";
import { IoLogOut } from "react-icons/io5";
import { FaRegCreditCard } from "react-icons/fa";
const DrawerAdmin = ({ children }) => {
    return (
        <>
         <div className="drawer lg:drawer-open">
                <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
                <div className="drawer-content flex flex-col">
                    {/* Navbar */}
                    <div className="navbar bg-white shadow-lg w-full z-40">
                        <div className="flex-none lg:hidden ">
                            <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    className="inline-block h-6 w-6 stroke-current">
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth="2"
                                        d="M4 6h16M4 12h16M4 18h16"></path>
                                </svg>
                            </label>
                        </div>
                        <div className="mx-2 flex-1 px-2 hidden md:block lg:block text-2xl">Dashboard</div>
                        <div className="flex-none lg:block">
                            <ul className="menu menu-horizontal">
                                {/* Navbar menu content here */}
                                <Search />
                                <li><a><IoIosNotifications className="text-[#9B8BC4] text-3xl" /></a></li>
                            </ul>
                        </div>
                    </div>
                    {/* Page content here */}
                    {Children.map(children, (child) => (
                            <div key={child.key}>
                                {child}
                            </div>
                        ))}
                {/* page content end */}
                </div>
                <div className="drawer-side  lg:block z-50">
                    <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
                    <div className='menu bg-white min-h-full w-60 lg:w-72 mx-2 '>
                        <h1 className='text-2xl font-bold p-3 text-[#9B8BC4]'>ESKAYVIE</h1>
                        <hr />
                        <br />
                        <div className='gird space-y-3'>
                            <button className='flex  rounded-lg active:ring active:ring-purple-500 w-full p-1 px-5 border py-2'>
                                <div className="join items-center space-x-3 ">
                                    <img src="/image/profile.png" alt="" className='join-item w-9 h-9 rounded-full' />
                                    <p className='join-item text-md font-semibold text-black'>Admin Slot</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-purple-500 w-full p-1 px-5 py-2 '>
                                <div className="join items-center space-x-3 ">
                                    <LuLayoutDashboard className='text-3xl text-white' />
                                    <p className='join-item text-md font-semibold text-white'>Dashboard</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-purple-500 w-full p-1 px-5 py-2'>
                                <div className="join items-center space-x-3 ">
                                    <FaBox className='text-3xl text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Product</p>
                                </div>
                            </button>

                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-purple-500 w-full p-1 px-5  py-2'>
                                <div className="join items-center space-x-3 ">
                                    <FaChartLine className='text-3xl text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Sales</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-purple-500 w-full p-1 px-5  py-2'>
                                <div className="join items-center space-x-3 ">
                                    <FaRegCreditCard className='text-3xl text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Payment</p>
                                </div>
                            </button>

                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-red-500 w-full p-1 px-5  py-2'>
                                <div className="join items-center space-x-3 ">
                                    <IoLogOut className='text-3xl text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Log Out</p>
                                </div>
                            </button>

                            <div class=" hs-dropdown [--trigger:hover] relative inline-flex w-full">
                                <button id="hs-dropdown-hover-event" type="button" class="hs-dropdown-toggle py-3  px-4  items-center gap-x-2 text-sm font-medium rounded-lg  w-full bg-[#AFA0D7] text-white shadow-sm hover:bg-[#9B8BC4] focus:outline-none focus:bg-[#9B8BC4] disabled:opacity-50 disabled:pointer-events-none flex justify-between" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <div className='flex items-center gap-5'>
                                        <FaClipboardUser className='text-white text-2xl' />
                                        Management
                                    </div>

                                    <svg class="hs-dropdown-open:rotate-180 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                                </button>

                                <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-64 bg-[#AFA0D7] shadow-md rounded-lg p-1 space-y-0.5 mt-2 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-hover-event">
                                    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100" href="#">
                                        <div className='flex items-center gap-3'>
                                            <RiCustomerService2Fill className='text-2xl text-black' />
                                            <p className='text-black text-md'>Seller</p>
                                        </div>
                                    </a>
                                    <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100" href="#">
                                        <div className='flex items-center gap-3'>
                                            <IoPeople className='text-2xl text-black' />
                                            <p className='text-black text-md'>Customer</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default DrawerAdmin