"use client";

import { Loader2 } from "lucide-react";
import { useMounted } from "@/hooks/use-mounted";
import { useProjectsHydrated } from "@/hooks/use-projects-hydrated";

interface ProjectsHydrationGateProps {
  children: React.ReactNode;
  /** Skip gate for pages that handle hydration themselves (e.g. create-only flows). */
  skip?: boolean;
}

export function ProjectsHydrationGate({ children, skip = false }: ProjectsHydrationGateProps) {
  const mounted = useMounted();
  const hydrated = useProjectsHydrated();
  const showContent = skip || (mounted && hydrated);

  if (showContent) {
    return children;
  }

  return (
    <div className="flex flex-1 items-center justify-center px-8 pb-8 pt-12">
      <Loader2 className="h-8 w-8 animate-spin text-brand-600" aria-label="Loading workspace" />
    </div>
  );
}