'use client'

import React, { useState } from 'react'
import Link from 'next/link'
import Button from './Button'
const Burger = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="relative z-50 w-8 h-8 flex flex-col justify-center items-center"
      >
        <div className="relative w-8 h-8">
          <span
            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
              isOpen ? 'w-8 rotate-45 top-4' : 'w-8 top-2'
            }`}
          ></span>
          <span
            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
              isOpen ? 'w-0 opacity-0 top-4' : 'w-8 top-4'
            }`}
          ></span>
          <span
            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
              isOpen ? 'w-8 -rotate-45 top-4' : 'w-8 top-6'
            }`}
          ></span>
        </div>
      </button>

      {/* меню */}
      <div
        className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
          isOpen
            ? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
            : 'top-[80px] h-0 opacity-0 scale-y-0'
        } ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
      >
        <div
          className={`flex flex-col items-center pt-12 space-y-8 transition-all duration-300 ${
            isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'
          }`}
        >
          <Link
            href="/"
            className="text-xl hover:text-orange transition-colors duration-200"
            onClick={() => setIsOpen(false)}
          >
            Ссылка 1
          </Link>
          <Link
            href="/search"
            className="text-xl hover:text-orange transition-colors duration-200"
            onClick={() => setIsOpen(false)}
          >
            Ссылка 2
          </Link>
          <Link
            href="/about"
            className="text-xl hover:text-orange transition-colors duration-200"
            onClick={() => setIsOpen(false)}
          >
            Ссылка 3
          </Link>
          <Link
            href="/"
            className="text-xl hover:text-orange transition-colors duration-200"
            onClick={() => setIsOpen(false)}
          >
            Могу взять посылку
          </Link>
          <Button text="Разместить объявление" />
        </div>
      </div>
    </>
  )
}

export default Burger