arbret/frontend/app/components/PageLayout.tsx

import { ReactNode } from "react";
import { Header } from "./Header";
import { LoadingState } from "./LoadingState";
import { ErrorDisplay } from "./ErrorDisplay";
import { layoutStyles } from "../styles/shared";

type PageId =
  | "profile"
  | "invites"
  | "exchange"
  | "trades"
  | "admin-invites"
  | "admin-availability"
  | "admin-trades"
  | "admin-price-history"
  | "admin-pricing";

interface PageLayoutProps {
  /** Current page ID for navigation highlighting */
  currentPage: PageId;
  /** Whether the page is loading (shows loading state) */
  isLoading?: boolean;
  /** Whether the user is authorized (hides page if false) */
  isAuthorized?: boolean;
  /** Error message to display */
  error?: string | null;
  /** Page content */
  children: ReactNode;
  /** Custom content wrapper style */
  contentStyle?: React.CSSProperties;
}

/**
 * Standard page layout component that handles common page structure:
 * - Loading state
 * - Authorization check
 * - Header navigation
 * - Error banner
 * - Content wrapper
 */
export function PageLayout({
  currentPage,
  isLoading = false,
  isAuthorized = true,
  error,
  children,
  contentStyle,
}: PageLayoutProps) {
  if (isLoading) {
    return <LoadingState />;
  }

  if (!isAuthorized) {
    return null;
  }

  return (
    <main style={layoutStyles.main}>
      <Header currentPage={currentPage} />
      <div style={contentStyle || layoutStyles.contentCentered}>
        <ErrorDisplay error={error} />
        {children}
      </div>
    </main>
  );
}