import type { ReactNode } from "react";
import { cn } from "@/lib/cn";

export type SectionTone = "paper" | "deep" | "surface" | "night";

const toneClasses: Record<SectionTone, string> = {
  paper: "bg-paper text-ink",
  deep: "bg-paper-deep text-ink",
  surface: "bg-surface text-ink",
  night: "tone-night bg-night text-night-text",
};

interface SectionProps {
  id?: string;
  tone?: SectionTone;
  spacing?: "default" | "tight" | "none";
  labelledBy?: string;
  grain?: boolean;
  className?: string;
  children: ReactNode;
}

export function Section({ id, tone = "paper", spacing = "default", labelledBy, grain, className, children }: SectionProps) {
  return (
    <section
      id={id}
      aria-labelledby={labelledBy}
      className={cn(
        toneClasses[tone],
        spacing === "default" && "section-space",
        spacing === "tight" && "section-space-tight",
        grain && "grain",
        "relative",
        className,
      )}
    >
      {children}
    </section>
  );
}