import { useEffect } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { NAV } from './Header.jsx';
import SocialLinks from './SocialLinks.jsx';
import { useLeadModal } from '../context/LeadModalContext.jsx';
import './MobileMenu.css';

export default function MobileMenu({ onClose }) {
  const { open } = useLeadModal();
  const { pathname } = useLocation();

  // закрываем при переходе на другую страницу и по Escape
  useEffect(() => {
    return undefined;
  }, []);
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);
  useEffect(() => {
    // первый рендер не закрывает меню, только смена адреса
    const initial = pathname;
    return () => {
      if (initial !== window.location.pathname) onClose();
    };
  }, [pathname, onClose]);

  return (
    <>
      <div className="mobile-menu__overlay" onClick={onClose} aria-hidden="true" />
      <nav className="mobile-menu" aria-label="Меню">
        {NAV.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            onClick={onClose}
            className={({ isActive }) => `mobile-menu__link${isActive ? ' mobile-menu__link--active' : ''}`}
          >
            {item.label}
          </NavLink>
        ))}
        <button
          type="button"
          className="btn btn--coral mobile-menu__cta"
          onClick={() => {
            onClose();
            open({ form: 'appointment' });
          }}
        >
          Записаться на приём
        </button>
        <SocialLinks className="mobile-menu__social" />
      </nav>
    </>
  );
}