import Header from "@/components/header";
import Footer from "@/components/footer";
import TaijiBackdrop from "@/components/layout/taiji-backdrop";
import {
  CONTENT_SHELL,
  type ContentShellWidth,
} from "@/lib/layout";
import { cn } from "@/lib/utils";

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(
          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
          CONTENT_SHELL[width],
          className,
        )}
      >
        {children}
      </main>
      <Footer />
    </div>
  );
}