import { Link, usePage } from '@inertiajs/react';
import SidebarSubmenu from './SidebarSubmenu';
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
import routes from '../Routes/sidebar';

function LeftSidebar() {
    const { url } = usePage();

    const close = () => {
        document.getElementById('left-sidebar-drawer').click();
    };

    return (
        <div className="drawer-side z-30">
            <label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label>
            <ul className="menu pt-2 w-64 bg-base-100 min-h-full text-base-content">
                <button
                    className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden"
                    onClick={close}
                >
                    <XMarkIcon className="h-5 w-5" />
                </button>
                <li className="mb-2 font-semibold">
                    <Link href="/dashboard" className='flex justify-center'><img src="/assets/gogoSantri.png" alt="pp" width={100} /></Link>
                </li>
                {routes.map((route, k) => (
                    <li key={k}>
                        {route.submenu ? (
                            <SidebarSubmenu {...route} />
                        ) : (
                            <Link
                                href={route.path}
                                className={`relative font-normal ${route.path === url ? 'font-semibold bg-base-200' : ''
                                    }`}
                            >
                                {route.path === url && (
                                    <span
                                        className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary"
                                        aria-hidden="true"
                                    ></span>
                                )}
                                {route.icon} {route.name}
                            </Link>
                        )}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default LeftSidebar;