import { useState } from "preact/hooks";
/**
 * @typedef {{ name: string; href: string }} MenuLink
 * @param {{ links: MenuLink[] }} props
 */
export default function MobileMenu({ links = [] }) {
  const [open, setOpen] = useState(false);

  const toggle = () => setOpen(o => !o);

  return (
    <>
      {/* Ikona hamburgera */}
      <button
        onClick={toggle}
        class="fuz-mobile-toggle md:hidden"
        aria-label="Menu mobilne"
      >
        {open ? "✖" : "☰"}
      </button>

      {/* Panel mobilny */}
      <div class={`fuz-mobile-menu ${open ? "open" : ""}`}>
        {links.map(link => (
          <a
            href={link.href}
            class="fuz-mobile-link"
            onClick={() => setOpen(false)}
          >
            {link.name}
          </a>
        ))}
      </div>
    </>
  );
}
