'use client';

import { useState } from "react";
import MobileMenu from "./MobileMenu";
import type { TreefrontMenu } from "@/types/theme/menus";

export default function MobileMenuTrigger({ menuData,isGuest }: { menuData: TreefrontMenu[],isGuest:boolean }) {
  const [isOpen, setIsOpen] = useState(false);
  const toggleMenu = () => setIsOpen((prev) => !prev);
  const closeMenu = () => setIsOpen(false);

  return (
    <>
      {/* 汉堡按钮 */}
      <button className="flex-none w-6 h-6" onClick={toggleMenu}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="0" y="0" width="24" height="24" fill="#FFFFFF" fillOpacity="0" />
          <path stroke="currentColor" strokeWidth="1.5" d="M4 5L20 5" />
          <path stroke="currentColor" strokeWidth="1.5" d="M4 12L20 12" />
          <path stroke="currentColor" strokeWidth="1.5" d="M4 19L20 19" />
        </svg>
      </button>

      {/* 抽屉菜单 */}
      <MobileMenu menu={menuData} isGuest={isGuest} isOpen={isOpen} onClose={closeMenu} />
    </>
  );
}