import { type ReactNode } from "react";

type PaddingSize = "none" | "sm" | "md" | "lg" | "xl";

interface SectionContainerProps {
  children: ReactNode;
  className?: string;
  /** Vertical padding preset — maps to spacing tokens */
  paddingY?: PaddingSize;
  /** HTML element to render */
  as?: "section" | "div";
  /** Section id for anchor links */
  id?: string;
}

/**
 * Tailwind class map for vertical section padding.
 *
 * Values use the spacing tokens from design-tokens.ts:
 *   sm  = 60px
 *   md  = 60px → 80px
 *   lg  = 60px → 80px → 100px
 *   xl  = 60px → 80px → 100px → 120px
 */
const paddingYClasses: Record<PaddingSize, string> = {
  none: "",
  sm: "py-[60px]",
  md: "py-[60px] md:py-[80px]",
  lg: "py-[60px] md:py-[80px] lg:py-[100px]",
  xl: "py-[60px] md:py-[80px] lg:py-[100px] xl:py-[120px]",
};

/**
 * SectionContainer — consistent vertical spacing for page sections.
 *
 * Use this to wrap every major page section. The `paddingY` prop
 * selects from predefined responsive spacing tokens.
 *
 * Does NOT include horizontal constraints — nest a `PageContainer`
 * inside for boxed content.
 */
export function SectionContainer({
  children,
  className = "",
  paddingY = "lg",
  as: Tag = "section",
  id,
}: SectionContainerProps) {
  return (
    <Tag id={id} className={`${paddingYClasses[paddingY]} ${className}`}>
      {children}
    </Tag>
  );
}