import Header from "@/components/header";
import Footer from "@/components/footer";
import TaijiBackdrop from "@/components/layout/taiji-backdrop";
import { SITE_WIDTH, SITE_WIDTH_NARROW } from "@/components/layout/site-width";
import { cn } from "@/lib/utils";

const SHELL_WIDTH = {
  default: SITE_WIDTH,
  narrow: SITE_WIDTH_NARROW,
  wide: SITE_WIDTH,
} as const;

export type ContentShellWidth = keyof typeof SHELL_WIDTH;

export default function PageShell({
  children,
  className = "",
  width = "default",
}: {
  children: React.ReactNode;
  className?: string;
  width?: ContentShellWidth;
}) {
  return (
    <div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
      <TaijiBackdrop />
      <Header />
      <main
        className={cn(
          "site-content-shell mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
          width === "narrow" && "site-content-shell-narrow",
          SHELL_WIDTH[width],
          className,
        )}
      >
        {children}
      </main>
      <Footer />
    </div>
  );
}