import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
import { SlideChrome } from "@/components/brand/slide-chrome";
import { Spotlight } from "@/components/effects/spotlight";

type SlideProps = {
  children: ReactNode;
  className?: string;
  variant?: "feature" | "paper" | "tone";
  number: number;
  total: number;
  align?: "start" | "center" | "end";
};

const variants = {
  feature: "slide-feature",
  paper: "slide-paper",
  tone: "slide-tone",
} as const;

const alignments = {
  start: "justify-start pt-[clamp(64px,9vh,128px)]",
  center: "justify-center",
  end: "justify-end pb-[clamp(64px,9vh,128px)]",
} as const;

export function Slide({
  children,
  className,
  variant = "paper",
  number,
  total,
  align = "center",
}: SlideProps) {
  const inverse = variant === "feature";
  return (
    <section
      className={cn(
        "relative flex min-h-screen w-full snap-start overflow-hidden",
        "px-[clamp(24px,6vw,128px)] py-[clamp(56px,8vh,96px)]",
        variants[variant],
        className,
      )}
    >
      {inverse && <Spotlight />}
      <div className={cn("relative z-[1] flex w-full flex-col", alignments[align])}>
        <div className="mx-auto w-full max-w-[1664px]">{children}</div>
      </div>
      <SlideChrome number={number} total={total} inverse={inverse} />
    </section>
  );
}