import type { ReactNode } from "react";
import { PageLayout } from "@/components/templates/PageLayout";

interface RouteLoadingProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  mode?: "skeleton" | "content";
  children?: ReactNode;
}

// Shared route-level loading wrapper used by segment loading.tsx files
export function RouteLoading({
  icon,
  title,
  description,
  mode = "skeleton",
  children,
}: RouteLoadingProps) {
  // Always use PageLayout with loading state for consistent skeleton loading
  return (
    <PageLayout icon={icon} title={title} description={description} loading={mode === "skeleton"}>
      {children}
    </PageLayout>
  );
}
