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

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

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