Flip Reveal

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface FlipRevealProps {
  children: ReactNode;
  /** Axis of the flip. */
  axis?: "x" | "y";
  delay?: number;
  repeat?: boolean;
  className?: string;
}

/**
 * Scroll-triggered 3D flip: the element swings in on its top (or left) hinge like a
 * sign board and lands in 4 hard steps with a slam.
 */
export function FlipReveal({ children, axis = "x", delay = 0, repeat = false, className }: FlipRevealProps) {
  const reduce = useReducedMotion();

  return (
    <div className={cn("[perspective:900px]", className)}>
      <motion.div
        className={cn("will-change-transform", axis === "x" ? "origin-top" : "origin-left")}
        initial={reduce ? false : axis === "x" ? { rotateX: -95, opacity: 0 } : { rotateY: -95, opacity: 0 }}
        whileInView={axis === "x" ? { rotateX: 0, opacity: 1 } : { rotateY: 0, opacity: 1 }}
        viewport={{ once: !repeat, amount: 0.4 }}
        transition={{ delay, duration: 0.45, ease: (t: number) => Math.ceil(t * 4) / 4 }}
      >
        {children}
      </motion.div>
    </div>
  );
}

export default FlipReveal;