'use client';

import { useRef, type MouseEvent } from 'react';
import './Menubar.css';

const menuLinks = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about-us' },
  { label: 'Plans', href: '/plans' },
  { label: 'Contact', href: '#' },
];

export default function Menubar() {
  const menuToggleRef = useRef<HTMLInputElement>(null);

  const closeMobileMenu = () => {
    if (menuToggleRef.current) {
      menuToggleRef.current.checked = false;
    }
  };

  const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
    closeMobileMenu();
    event.currentTarget.blur();
  };

  return (
    <nav className="menubar">
      <div className="menubar-content">
        <div className="desktop-menu">
          {menuLinks.map((link) => (
            <a key={link.label} href={link.href} className="menu-item">
              {link.label}
            </a>
          ))}
        </div>
        <div className="mobile-menu">
          <input
            ref={menuToggleRef}
            type="checkbox"
            id="mobile-nav-toggle"
            className="mobile-menu-checkbox"
          />
          <label
            htmlFor="mobile-nav-toggle"
            className="burger-icon"
            aria-controls="mobile-nav-menu"
          >
            <span className="burger-icon-menu" aria-hidden="true">
              &#9776;
            </span>
            <span className="burger-icon-close" aria-hidden="true">
              &times;
            </span>
          </label>
          <div id="mobile-nav-menu" className="mobile-dropdown">
            <div className="mobile-dropdown-inner">
              {menuLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  className="menu-item mobile-dropdown-item"
                  onClick={handleLinkClick}
                >
                  {link.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}