"use client";
import { useEffect, type ReactNode } from "react";
import { MarketplaceHeader } from "./MarketplaceHeader";
import { MarketplaceSidebar } from "./MarketplaceSidebar";
import { MarketplaceBottomNav } from "./MarketplaceBottomNav";
import { MarketplaceFAB } from "./MarketplaceFAB";
import { MarketplaceFooter } from "./MarketplaceFooter";
import { useAppDispatch } from "@/store/hooks";
import { fetchGeneralSettings } from "@/store/slices/generalSettingSlice";

export function MarketplaceShell({ children }: { children: ReactNode }) {
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(fetchGeneralSettings());
  }, [dispatch]);
  return (
    // Use inline style for height — guarantees viewport sizing regardless of Tailwind purge
    <div
      style={{
        height: "100dvh",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
        background: "var(--bg)",
      }}
    >
      {/* ── Sticky top header ─────────────────────────────────────────────── */}
      <MarketplaceHeader />

      {/* ── Body: sidebar + scrollable main ───────────────────────────────── */}
      <div
        style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}
      >
        {/* Desktop sidebar — hidden on mobile */}
        <MarketplaceSidebar />

        {/* Scrollable content column */}
        <main
          id="marketplace-main"
          className="pb-20 md:pb-0"
          style={{ flex: 1, overflowY: "auto", minWidth: 0 }}
        >
          {children}
          {/* Site footer inside the scroll area (desktop) */}
          {/* <MarketplaceFooter /> */}
        </main>
      </div>

      {/* ── Fixed mobile nav + FAB (position:fixed, no transforms here) ────── */}
      <MarketplaceBottomNav />
      <MarketplaceFAB />
    </div>
  );
}