import { menuItems } from '@/utils/menu';
import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react';
import logo from '@/assets/icons/maw-white.svg'

const Drawer = ({ isOpen, toggleDrawer }: { isOpen: boolean, toggleDrawer: any }) => {

    return (
        <div className="relative">
            {/* Drawer */}
            <div
                className={`fixed inset-y-0 left-0 z-20 w-64 bg-black shadow-xl transform transition-transform ease-in-out duration-300 ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
            >
                {/* Close button */}
                <button
                    className="absolute top-0 right-0 m-4 text-gray-500"
                    onClick={toggleDrawer}
                    aria-label="Close drawer"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                </button>

                {/* Drawer content */}
                <div className="p-4 space-y-5">
                    <Image src={logo} alt='' width={50} height={50} />
                    <div className='flex flex-col gap-5'>
                        {
                            menuItems.map((menu: any) => (
                                <Link href={menu.href} className='capitalize' onClick={toggleDrawer}>
                                    {menu.name}
                                </Link>
                            ))
                        }
                    </div>
                </div>
                <div className='absolute bottom-5 text-center justify-center flex'>
                    <span className='text-muted  text-xs'></span>
                </div>
            </div>
            {isOpen && <div className='bg-white w-full h-full fixed opacity-30 top-0 left-0' onClick={toggleDrawer}></div>}
        </div>
    );
};

export default Drawer;