"use client";

import dynamic from "next/dynamic";
import { useState } from "react";
import type { MobileNavProps } from "@/components/layout/mobile-nav";

const LazyMobileNav = dynamic(
  () => import("@/components/layout/mobile-nav").then((mod) => mod.MobileNav),
  { ssr: false },
);

export function MobileNavShell(props: MobileNavProps) {
  const [isLoaded, setIsLoaded] = useState(false);

  if (isLoaded) {
    return <LazyMobileNav {...props} defaultOpen />;
  }

  return (
    <button
      type="button"
      aria-label="Ouvrir le menu"
      onClick={() => setIsLoaded(true)}
      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#ffdede] bg-white text-[var(--foreground)] shadow-[0_10px_24px_rgba(17,28,23,0.08)] transition hover:bg-[var(--surface-2)]"
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-5 w-5">
        <path strokeLinecap="round" d="M4 7h16" />
        <path strokeLinecap="round" d="M4 12h16" />
        <path strokeLinecap="round" d="M4 17h16" />
      </svg>
    </button>
  );
}