Wipe Reveal

"use client";

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

export interface WipeRevealProps {
  children: ReactNode;
  /** Color block that sweeps across before the content appears. */
  tone?: "primary" | "accent" | "secondary" | "ink";
  /** Sweep direction. */
  direction?: "left" | "right" | "up";
  delay?: number;
  /** Replay every time the element re-enters the viewport. */
  repeat?: boolean;
  className?: string;
}

const TONE = { primary: "bg-da-primary", accent: "bg-da-accent", secondary: "bg-da-secondary", ink: "bg-da-fg" } as const;

/**
 * Scroll-triggered wipe: a solid DA color block slides over the element, the content
 * appears underneath at mid-point, then the block exits on the other side.
 */
export function WipeReveal({ children, tone = "primary", direction = "left", delay = 0, repeat = false, className }: WipeRevealProps) {
  const reduce = useReducedMotion();
  const sign = direction === "right" ? -1 : 1;
  const from = `${-101 * sign}%`;
  const to = `${101 * sign}%`;
  const vertical = direction === "up";

  return (
    <motion.div
      className={cn("relative overflow-hidden", className)}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: !repeat, amount: 0.4 }}
    >
      <motion.div variants={{ hidden: { opacity: 0 }, shown: { opacity: 1, transition: { delay: delay + 0.28, duration: 0 } } }}>{children}</motion.div>
      {!reduce && (
        <motion.div
          aria-hidden
          className={cn("pointer-events-none absolute inset-0 z-10", TONE[tone], vertical ? "da-stroke-t da-stroke-b" : "da-stroke-l da-stroke-r")}
          variants={{
            hidden: vertical ? { y: "101%" } : { x: from },
            shown: {
              ...(vertical ? { y: ["101%", "0%", "0%", "-101%"] } : { x: [from, "0%", "0%", to] }),
              transition: { delay, duration: 0.7, times: [0, 0.4, 0.5, 1], ease: [0.7, 0, 0.3, 1] },
            },
          }}
        />
      )}
    </motion.div>
  );
}

export default WipeReveal;