import type { ReactNode } from "react";
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
import { TopographicPattern } from "@/components/brand/TopographicPattern";
import { ScrollReveal } from "@/components/motion/ScrollReveal";
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
import {
  SITE_TOPO_PATTERN,
  toneFromSectionVariant,
  type TopoPatternId,
} from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

type Props = {
  id?: string;
  className?: string;
  children: ReactNode;
  variant?: "default" | "muted" | "inverse";
  riftPattern?: TopoPatternId;
  riftFlow?: boolean;
};

export function Section({
  id,
  className,
  children,
  variant = "default",
  riftPattern = SITE_TOPO_PATTERN,
  riftFlow,
}: Props) {
  let pattern: TopoPatternId = riftPattern;
  if (riftFlow && pattern === "none") pattern = SITE_TOPO_PATTERN;
  const tone = toneFromSectionVariant(variant);
  const isGreen = tone === "green";
  const showPattern = !isGreen && pattern !== "none";

  return (
    <section
      id={id}
      className={cn(
        "group/topo-section relative isolate py-16 md:py-24",
        isGreen && "section-green bg-[#1a5c38] text-white",
        !isGreen && "section-white bg-white text-[#0d3d26]",
        showPattern && "overflow-x-hidden",
        isGreen && "overflow-hidden",
        className
      )}
      data-section-tone={tone}
    >
      {showPattern && (
        <TopographicPattern pattern={pattern} tone="light" />
      )}
      {!isGreen && <TopoCurvyExtend />}
      <TopoSectionProvider tone={tone}>
        <ScrollReveal
          variant="section"
          className={cn(
            "topo-content-layer relative z-10 mx-auto max-w-6xl px-4 md:px-6",
            !isGreen && "topo-content-readable"
          )}
        >
          {children}
        </ScrollReveal>
      </TopoSectionProvider>
    </section>
  );
}