import { cn } from "@/lib/utils";
import { Container } from "./Container";

type Tone = "paper" | "ink" | "brand";

const tones: Record<Tone, string> = {
  paper: "bg-paper text-ink",
  ink: "bg-ink text-paper",
  brand: "bg-brand text-brand-fg",
};

/**
 * Page section wrapper: tone + vertical rhythm + optional contained inner.
 * Blocks compose this so spacing/background stay consistent site-wide.
 */
export function Section({
  children,
  tone = "paper",
  contained = true,
  className,
  innerClassName,
  id,
}: {
  children: React.ReactNode;
  tone?: Tone;
  contained?: boolean;
  className?: string;
  innerClassName?: string;
  id?: string;
}) {
  return (
    <section id={id} className={cn("py-20 md:py-30", tones[tone], className)}>
      {contained ? (
        <Container className={innerClassName}>{children}</Container>
      ) : (
        children
      )}
    </section>
  );
}