"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 ToneSlideProps = {
  number: number;
  total: number;
  eyebrow: string;
  title: ReactNode;
  body?: ReactNode;
  align?: "start" | "center" | "end";
  children?: ReactNode;
};

/**
 * Tone slide: subtle ink-50 background. Bridge between paper and feature.
 * Use for soft transitions or to break long sequences of paper slides.
 */
export function ToneSlide({
  number,
  total,
  eyebrow,
  title,
  body,
  align = "start",
  children,
}: ToneSlideProps) {
  return (
    <Slide variant="tone" 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(28px, 3.8vw, 56px)",
              lineHeight: 1.1,
              letterSpacing: "-0.01em",
              maxWidth: "1100px",
              color: "var(--ink-900)",
            }}
          >
            {title}
          </h2>
        </Reveal>

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

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