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

/** 必须在组件内写完整类名，Tailwind 才能生成对应 CSS */
const SHELL_WIDTH = {
  default: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
  narrow: "w-full max-w-3xl px-4 sm:px-6 lg:px-8",
  wide: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
} 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(
          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
          SHELL_WIDTH[width],
          className,
        )}
      >
        {children}
      </main>
      <Footer />
    </div>
  );
}