import { type ReactNode } from "react";
import { AppHeader } from "./AppHeader.tsx";

interface PageShellProps {
  children: ReactNode;
  centered?: boolean;
  centerSlot?: ReactNode;
}

export function PageShell(
  { children, centered = false, centerSlot }: PageShellProps,
) {
  return (
    <div className="page-shell">
      <AppHeader centerSlot={centerSlot} />
      <main
        className={`page-content${centered ? " page-content--centered" : ""}`}
      >
        {children}
      </main>
    </div>
  );
}
