"use client";

import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import CategoryList from "@/components/CategoryList/CategoryList";
import CurveTop from "@/components/CurveTop/CurveTop";
import TopContent from "@/components/TopContent/TopContent";

import { apiEndpoints } from "@/lib/api";

export const MenuLayout = ({ children }: { children: React.ReactNode }) => {
  const pathname = usePathname();
  const [menus, setMenus] = useState<
    Array<{ id: string; slug: string; name: string }>
  >([]);

  // Check if this is a product page (has 4 segments: /menu/slug/productSlug)
  const isProductPage = pathname.split("/").length >= 4;

  useEffect(() => {
    if (!isProductPage) {
      apiEndpoints.menus().then(({ data }) => {
        setMenus((data as any) || []);
      });
    }
  }, [isProductPage]);

  if (isProductPage) {
    return <>{children}</>;
  }

  return (
    <>
      <CurveTop />
      <TopContent />
      <CategoryList menus={menus} />
      {children}
    </>
  );
};

export default MenuLayout;