import React, {useState} from 'react';
import Link from "next/link";
import {Image} from "next/dist/client/image-component";
import logo1 from '@/public/logo/Paintingssg-logo.png';
import logo2 from '@/public/logo/Paintingssg-logo-color.png';
import SidebarMenu from "@/components/AuthLayouts/SideBarMenu";
import {RiDashboard3Line} from "react-icons/ri";
import {FaUser} from "react-icons/fa6";
import {FaUserCircle} from "react-icons/fa";
import {GoTasklist} from "react-icons/go";
interface Props {
    sidebar: boolean;
}

function Sidebar({sidebar}: Props) {
    const [currentOpen, setCurrentOpen] = useState<number | null>(null)
    return (
        <div
            className={`fixed max-h-[100vh] flex flex-col justify-between items-center overflow-y-auto custom-scrollbar left-0 top-0 w-64 h-full duration-300 bg-neutral-50 dark:bg-gray-900 z-50 transition-transform  ${sidebar ? '-translate-x-full' : ''} `}>
            <div>
                <Link href="/"
                      className="flex dark:hidden  sticky top-0 items-center border-b border-b-gray-800 dark:border-b-black bg-neutral-50 dark:bg-gray-900 z-10 w-full">
                    <Image src={logo2} width={200} height={100} alt='logo'/>
                </Link>
                <Link href="/"
                      className="hidden dark:flex  sticky top-0 items-center border-b border-b-gray-800 dark:border-b-black bg-neutral-50 dark:bg-gray-900 z-10 w-full">
                    <Image src={logo1} width={200} height={100} alt='logo'/>
                </Link>
                <ul className="mt-2">
                    {<SidebarMenu
                        title='Dashboard'
                        icon={<RiDashboard3Line/>}
                        url='/dashboard'
                        index={1}
                        currentOpen={currentOpen}
                        setCurrentOpen={setCurrentOpen}
                        submenus={null}
                    />}

                    {<SidebarMenu
                        title='Users Management'
                        icon={<FaUserCircle/>}
                        url=''
                        index={2}
                        currentOpen={currentOpen}
                        setCurrentOpen={setCurrentOpen}
                        submenus={[
                            {title: 'Users', url: '/users'},
                            {title: 'Create User', url: '/create-user'},
                        ]}
                    />}
                    {<SidebarMenu
                        title='Orders Management'
                        icon={<GoTasklist />}
                        url=''
                        index={3}
                        currentOpen={currentOpen}
                        setCurrentOpen={setCurrentOpen}
                        submenus={[
                            {title: 'Painting Orders', url: '/painting-orders'},
                        ]}
                    />}
                </ul>
            </div>
            <div className="w-full p-4 border-t border-t-gray-800 dark:border-t-black bg-neutral-50 dark:bg-gray-900">
                <p className="text-sm text-center text-gray-500 dark:text-gray-400">© 2026 PaintingsSG. All rights reserved.</p>
            </div>
        </div>
    );
}

export default Sidebar;