import { LogoutCurve } from "iconsax-react"
import { SidebarInterface } from "../../../types"
import { sidebarItems } from "../../../utility/sidebar"
import { SidebarItem } from "./sidebar-item"
import { useNavigate } from "react-router-dom"

export const Sidebar = () => {
    const navigate = useNavigate()
    const handleExit = () => {
        window.localStorage.clear()
        navigate("/auth/login")
    }
    return (
        <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
            <div className="flex flex-col justify-between h-full bg-auth-form ">
                <div className="flex flex-col gap-y-3">
                    {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                </div>
                <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer" onClick={handleExit}>
                    <LogoutCurve color="#777577" className="size-[27px]" />
                    <p className="font-normal text-base text-secondary-text-color">خروج</p>
                </div>
            </div>
        </div>
    )
}