'use client'
import React, { Dispatch, SetStateAction } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { LockBodyScroll } from '@/components/ui/lockBodyScroll'
import { Button } from '@/components/ui/button'
import { FaceBookIcon, InstagramIcon, TelegramIcon } from '@/components/icons/socials'
import { ButtonArrow } from '@/components/icons/button-icon'
import Image from 'next/image'
import CarImage from '@/public/layout/burger-menu-sm.png'
import CarMdImage from '@/public/layout/burger-menu-md.png'
import Link from 'next/link'

interface Props {
  setOpen: Dispatch<SetStateAction<boolean>>
  moreThan900px: boolean
}

export const BurderMenu: React.FC<Props> = ({ setOpen, moreThan900px }) => {
  return (
    <>
      <motion.div
        initial={{ top: '-100%' }}
        animate={{ top: '0' }}
        exit={{ top: '-100%' }}
        transition={{ duration: 0.3 }}
        className=" pt-[128px]  flex flex-col tablet:pt-[160px] fixed top-0 left-0 z-100 w-screen h-[100vh] bg-base-black"
      >
        <Image
          src={CarMdImage}
          alt={'logo'}
          className="z-[1] w-full h-full  absolute top-0 left-0"
        />

        <div className="relative z-[2] container-padding w-full flex justify-between flex-col">
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/catalog">Catalog</Link>
          </Button>
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/rental-terms">Rental terms</Link>
          </Button>
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/about-us">About us</Link>
          </Button>
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/blog">Blog</Link>
          </Button>
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/reviews">Reviews</Link>
          </Button>
          <Button asChild className="w-fit mx-auto" variant="link-primary" sizes="btn-link-lg">
            <Link href="/contacts">Contacts</Link>
          </Button>
        </div>
        <div className="relative z-[2] flex w-full mt-auto gap-y-4 flex-col">
          <div className="mx-auto">
            <Button
              className=""
              sizes="btn-sm"
              variant="tertiary"
              isRightIcon
              RightIcon={
                <ButtonArrow className="text-base-white rotate-90" width={10} height={12} />
              }
            >
              <div className="block leading-[10px] w-[68px]"> ENG </div>
            </Button>
          </div>
          <div
            className="flex gap-x-4 mx-auto "
            style={{ paddingBottom: `env(safe-area-inset-bottom)` }}
          >
            <Button
              sizes="icon-btn-md"
              className="w-fit"
              iconOnly
              icon={<InstagramIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
              variant="icon-only"
            />
            <Button
              sizes="icon-btn-md"
              className="w-fit"
              iconOnly
              icon={<FaceBookIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
              variant="icon-only"
            />
            <Button
              sizes="icon-btn-md"
              className="w-fit"
              iconOnly
              icon={<TelegramIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
              variant="icon-only"
            />
          </div>
          <div className="w-[1px] h-10"></div>
        </div>
      </motion.div>
      <LockBodyScroll />
    </>
  )
}
