import React, { Children } from 'react';
import { MdOutlineDashboard } from "react-icons/md";
import { BsBagPlusFill } from "react-icons/bs";
import { MdOutlineFavorite } from "react-icons/md";
import { IoLogOut } from "react-icons/io5";
import Search from '../Elements/Search'
import { IoIosNotifications } from "react-icons/io";

const Drawer = ({ 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">Home</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 */}
                    <div>
                        {Children.map(children, (child) => (
                            <div key={child.key}>
                                {child}
                            </div>
                        ))}
                    </div>
                </div>
                <div className="drawer-side lg:block">
                    <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
                    <div className='menu bg-white min-h-full w-52 lg:w-64 '>
                        <h1 className='text-2xl font-bold p-3 text-[#9B8BC4] mb-1'>ESKAYVIE</h1>
                        <hr />
                        <br />
                        <div className='gird space-y-3'>
                            <button className='flex bg-[#AFA0D7] rounded-lg active:ring active:ring-purple-500 w-full p-2'>
                                <div className="join items-center space-x-3 ">
                                    <img src="/image/profile.png" alt="" className='join-item w-7 h-7 rounded-full' />
                                    <p className='join-item text-md font-semibold text-white'>Admin Slot</p>
                                </div>
                            </button>

                            <button className='flex bg-[#AFA0D7] rounded-lg  focus:ring-purple-500 focus:outline-none focus:ring w-full'>

                                <div className="join items-center space-x-3 p-2">
                                    <MdOutlineDashboard className='join-item w-6 h-6 rounded-full text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Dasboard</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg  focus:ring-purple-500 focus:outline-none focus:ring w-full'>

                                <div className="join items-center space-x-3 p-2">
                                    <BsBagPlusFill className='join-item w-6 h-6 rounded-full text-white' />

                                    <p className='join-item text-md font-semibold text-white'>Orders</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg  focus:ring-purple-500 focus:outline-none focus:ring w-full'>

                                <div className="join items-center space-x-3 p-2">
                                    <MdOutlineFavorite className='join-item w-6 h-6 rounded-full text-white' />

                                    <p className='join-item text-md font-semibold text-white'>My Whitelist</p>
                                </div>
                            </button>
                            <button className='flex bg-[#AFA0D7] rounded-lg  focus:ring-red-500 focus:outline-none focus:ring w-full'>

                                <div className="join items-center space-x-3 p-2">
                                    <IoLogOut className='join-item w-6 h-6 rounded-full text-white' />

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

                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Drawer;
