Blob Reveal

"use client";

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

export interface BlobRevealProps {
  children: ReactNode;
  tone?: "peach" | "mint" | "lavender" | "butter";
  delay?: number;
  className?: string;
}

const TONES = { peach: "bg-da-accent", mint: "bg-da-secondary", lavender: "bg-da-primary/15", butter: "bg-da-warning/30" } as const;

/** Reveal where a pastel blob grows behind the content (rounded, slightly rotated) and the content then fades up on top of it. */
export function BlobReveal({ children, tone = "mint", delay = 0, className }: BlobRevealProps) {
  const reduce = useReducedMotion();
  return (
    <motion.div className={cn("relative isolate", className)} initial={reduce ? false : "hidden"} whileInView="shown" viewport={{ once: true, amount: 0.4 }}>
      <motion.span
        aria-hidden
        className={cn("absolute -inset-4 -z-10 rounded-[40%_60%_55%_45%/50%_45%_55%_50%]", TONES[tone])}
        variants={{ hidden: { scale: 0, rotate: -20 }, shown: { scale: 1, rotate: -3, transition: { delay, type: "spring", stiffness: 180, damping: 14 } } }}
      />
      <motion.div variants={{ hidden: { opacity: 0, y: 12 }, shown: { opacity: 1, y: 0, transition: { delay: delay + 0.2, duration: 0.4 } } }}>
        {children}
      </motion.div>
    </motion.div>
  );
}

export default BlobReveal;