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;
  direction?: "left" | "up";
  /** Show a primary bar that sweeps across before the content. */
  bar?: boolean;
  delay?: number;
  className?: string;
}

/** Reveal for images, charts and mockups: a primary bar sweeps across, then the content is unveiled with a clip-path wipe (left→right or bottom→top) on scroll into view. */
export function WipeReveal({ children, direction = "left", bar = true, delay = 0, className }: WipeRevealProps) {
  const reduce = useReducedMotion();
  const hidden = direction === "left" ? "inset(0 100% 0 0)" : "inset(100% 0 0 0)";
  return (
    <motion.div className={cn("relative", className)} initial={reduce ? false : "hidden"} whileInView="shown" viewport={{ once: true, amount: 0.3 }}>
      <motion.div
        variants={{
          hidden: { clipPath: hidden },
          shown: { clipPath: "inset(0 0% 0 0)", transition: { duration: 0.7, delay: delay + (bar ? 0.35 : 0), ease: [0.6, 0, 0.2, 1] } },
        }}
      >
        {children}
      </motion.div>
      {bar && !reduce && (
        <motion.span
          aria-hidden
          className={cn(
            "pointer-events-none absolute bg-da-primary",
            direction === "left" ? "inset-y-0 left-0 w-full origin-left" : "inset-x-0 bottom-0 h-full origin-bottom",
          )}
          variants={{
            hidden: direction === "left" ? { scaleX: 0 } : { scaleY: 0 },
            shown: {
              ...(direction === "left" ? { scaleX: [0, 1, 1, 0] } : { scaleY: [0, 1, 1, 0] }),
              originX: direction === "left" ? [0, 0, 1, 1] : 0.5,
              originY: direction === "up" ? [1, 1, 0, 0] : 0.5,
              transition: { duration: 1.05, delay, times: [0, 0.35, 0.5, 1], ease: "easeInOut" },
            },
          }}
        />
      )}
    </motion.div>
  );
}

export default WipeReveal;