import type { ReactNode } from "react";
import { RiftSectionAccent } from "@/components/brand/RiftSectionAccent";
import type { RiftPattern } from "@/components/brand/rift-patterns";
import { cn } from "@/lib/utils";

type Props = {
  id?: string;
  className?: string;
  children: ReactNode;
  variant?: "default" | "muted" | "inverse";
  /** Subtle line accent for this section — page spine handles vertical flow */
  riftPattern?: RiftPattern;
  /** @deprecated Use riftPattern instead */
  riftFlow?: boolean;
};

export function Section({
  id,
  className,
  children,
  variant = "default",
  riftPattern = "none",
  riftFlow,
}: Props) {
  const pattern: RiftPattern = riftFlow && riftPattern === "none" ? "whisper" : riftPattern;

  return (
    <section
      id={id}
      className={cn(
        "relative py-16 md:py-24",
        variant === "muted" && "section-muted",
        variant === "inverse" && "section-inverse",
        pattern !== "none" && "overflow-hidden",
        className
      )}
    >
      <RiftSectionAccent pattern={pattern} inverse={variant === "inverse"} />
      <div className="relative z-10 mx-auto max-w-6xl px-4 md:px-6">{children}</div>
    </section>
  );
}