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

type Props = {
    setShow: (value: boolean) => void,
    show: any,
};

export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
    const navigate = useNavigate()
    const handleCloseSidebar = () => setShow(false);
    const handleExit = () => {
        window.localStorage.clear()
        navigate("/auth/login")
    }
    return (
        <>
            {show && (
                <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={handleCloseSidebar}></div>
            )}
            <div className={`lg:hidden fixed top-0 left-full !z-50 h-screen transition ease-in-out duration-1000  ${show ? '-translate-x-full' : ''} bg-auth-form w-max`}>
                <div className="relative p-4 h-full">
                    <CloseCircle color="gray" variant="Bold" className="size-7 text-white absolute top-2 right-2" onClick={handleCloseSidebar} />
                    <div className="lg:hidden w-full h-full max-w-max p-[21px] flex flex-col gap-y-[44px] items-center xl:max-w-fit bg-secondry-color">
                        <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
                        <div className="h-full flex flex-col justify-between">
                            <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>
                </div>
            </div>
        </>
    );
};
