"use client";

import { useMemo } from "react";

import { useLayout } from "@/context/hooks/useLayout";
import { useHomeData, HomeSeedProvider } from "@/context/helpers/Home";
import { getLayoutHome } from "@/layouts/registry";
import HeroSkeleton from "@/features/home/hero/HeroSkeleton";

function HomeViewContent() {
  const { layout } = useLayout();
  const { isLoading } = useHomeData();

  const HomePageComponent = useMemo(() => getLayoutHome(layout), [layout]);

  if (isLoading) {
    return (
      <main>
        <HeroSkeleton />
      </main>
    );
  }

  return <HomePageComponent />;
}

/**
 * Layout-aware home view (migrated from pages/home/index.jsx).
 * Shared by the "/" and "/home" routes; loads the active layout's Home via the
 * registry, which lazy-loads only that layout's chunk.
 *
 * `initialHomeData` (fetched server-side by the route) is exposed via
 * `HomeSeedProvider` so `useHomeData()` already has real content on the very
 * first render — server and client alike — matching the server-resolved
 * `layout` cookie so no skeleton flash / hydration mismatch is needed.
 */
export default function HomeView({ initialHomeData }) {
  return (
    <HomeSeedProvider data={initialHomeData}>
      <HomeViewContent />
    </HomeSeedProvider>
  );
}