'use client'

import { useEffect } from 'react'

export function MobileMenuToggle() {
  useEffect(() => {
    function wireMenu() {
      const toggle = document.querySelector('.menu-toggle') as HTMLButtonElement | null
      const menu = document.getElementById('mobile-menu')
      if (!toggle || !menu) return

      function handleClick() {
        const isOpen = toggle!.classList.toggle('is-open')
        menu!.classList.toggle('is-open', isOpen)
        toggle!.setAttribute('aria-expanded', isOpen ? 'true' : 'false')
        toggle!.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu')
        menu!.setAttribute('aria-hidden', isOpen ? 'false' : 'true')
      }

      toggle.addEventListener('click', handleClick)
      return () => toggle.removeEventListener('click', handleClick)
    }

    const cleanup = wireMenu()
    return cleanup
  }, [])

  return (
    <button
      type="button"
      className="menu-toggle flex cursor-pointer flex-col gap-1 border-0 bg-transparent p-2 md:hidden"
      aria-label="Open menu"
      aria-expanded="false"
      aria-controls="mobile-menu"
    >
      <span className="bg-ink block h-px w-[22px] transition-all"></span>
      <span className="bg-ink block h-px w-[22px] transition-all"></span>
      <span className="bg-ink block h-px w-[22px] transition-all"></span>
    </button>
  )
}