"use client";

import type { ReactNode } from "react";
import { Reveal } from "@/components/animations/reveal";
import { EyebrowMark } from "@/components/brand/eyebrow";
import { Slide } from "@/components/deck/slide";

type PaperSlideProps = {
  number: number;
  total: number;
  eyebrow: string;
  title: ReactNode;
  body?: ReactNode;
  align?: "start" | "center" | "end";
  children?: ReactNode;
};

/**
 * Light slide variant. Use for informational density: tables, figures,
 * structured argument. Title in DM Serif regular + ink-900.
 */
export function PaperSlide({
  number,
  total,
  eyebrow,
  title,
  body,
  align = "start",
  children,
}: PaperSlideProps) {
  return (
    <Slide variant="paper" number={number} total={total} align={align}>
      <div className="flex flex-col gap-8">
        <Reveal direction="up" duration={0.3}>
          <EyebrowMark>{eyebrow}</EyebrowMark>
        </Reveal>

        <Reveal direction="up" delay={0.15} duration={0.4}>
          <h2
            className="font-display"
            style={{
              fontSize: "clamp(32px, 4.4vw, 64px)",
              lineHeight: 1.08,
              letterSpacing: "-0.015em",
              maxWidth: "1200px",
              color: "var(--ink-900)",
            }}
          >
            {title}
          </h2>
        </Reveal>

        {body && (
          <Reveal direction="up" delay={0.3} duration={0.4}>
            <p
              style={{
                fontSize: "clamp(16px, 1.4vw, 22px)",
                lineHeight: 1.5,
                maxWidth: "780px",
                color: "var(--ink-700)",
              }}
            >
              {body}
            </p>
          </Reveal>
        )}

        {children}
      </div>
    </Slide>
  );
}