import { createContext, useContext, type ReactNode } from "react";
import { cn } from "@/lib/utils";

/**
 * Brandscape-explore-main page width shells.
 * Reference pages use `container mx-auto px-6` plus optional max-width:
 * - wide: full Tailwind container (~1400px at 2xl)
 * - content: CourseOverview body (`max-w-5xl`)
 * - narrow: Big Idea / narrative (`max-w-4xl`)
 * - prose: Assessment-style columns (`max-w-3xl`)
 *
 * Nested shells (e.g. CourseOverview wrapping body blocks) become pass-through
 * so we do not double-apply container / max-width / paddingY.
 */
export type BrandscapeShellVariant = "wide" | "content" | "narrow" | "prose";

const VARIANT_CLASS: Record<BrandscapeShellVariant, string> = {
  wide: "container mx-auto px-6",
  content: "container mx-auto px-6 max-w-5xl",
  // Match brandscape PbelOverview: max-w-4xl mx-auto px-6 (not Tailwind `container`)
  narrow: "max-w-4xl mx-auto px-6",
  prose: "container mx-auto px-6 max-w-3xl",
};

const BrandscapeShellContext = createContext(false);

type BrandscapeShellProps = {
  variant?: BrandscapeShellVariant;
  /** Vertical section padding — CMS standalone blocks; nested shells ignore this. */
  paddingY?: boolean | "sm" | "md";
  className?: string;
  children: ReactNode;
  as?: "div" | "section";
};

export function BrandscapeShell({
  variant = "wide",
  paddingY = false,
  className,
  children,
  as: Tag = "div",
}: BrandscapeShellProps) {
  const nested = useContext(BrandscapeShellContext);
  if (nested) {
    return <>{children}</>;
  }

  const yClass =
    paddingY === true || paddingY === "md"
      ? "py-10"
      : paddingY === "sm"
        ? "py-6"
        : "";

  return (
    <BrandscapeShellContext.Provider value={true}>
      <Tag className={cn(VARIANT_CLASS[variant], yClass, "w-full min-w-0", className)}>{children}</Tag>
    </BrandscapeShellContext.Provider>
  );
}