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

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

export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
    const handleCloseSidebar = () => setShow(false)
    return (
        show && <div className="lg:hidden fixed top-0 left-full z-0 h-screen transition-transform -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">
                            <LogoutCurve color="#777577" className="size-[27px]" />
                            <p className="font-normal text-base text-secondary-text-color">خروج</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}