Curtain Wipe

"use client";

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

export interface CurtainWipeProps {
  children: ReactNode;
  /** Curtain color. */
  tone?: "ink" | "signal";
  delay?: number;
  className?: string;
}

/** Block reveal: a solid ink (or signal) curtain covers the content, then slides away to the right, uncovering it — for images and cards entering the viewport. */
export function CurtainWipe({ children, tone = "ink", delay = 0, className }: CurtainWipeProps) {
  const reduce = useReducedMotion();
  return (
    <motion.div
      className={cn("relative overflow-hidden", className)}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: true, amount: 0.4 }}
    >
      <motion.div variants={{ hidden: { opacity: 0 }, shown: { opacity: 1, transition: { delay: delay + 0.35, duration: 0.01 } } }}>{children}</motion.div>
      {!reduce && (
        <motion.span
          aria-hidden
          className={cn("absolute inset-0 origin-left", tone === "ink" ? "bg-da-fg" : "bg-da-accent")}
          variants={{
            hidden: { scaleX: 0 },
            shown: { scaleX: [0, 1, 1, 0], originX: [0, 0, 1, 1], transition: { duration: 1.1, delay, times: [0, 0.35, 0.45, 1], ease: [0.7, 0, 0.2, 1] } },
          }}
        />
      )}
    </motion.div>
  );
}

export default CurtainWipe;