Glass Reveal

"use client";

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

export interface GlassRevealProps {
  children: ReactNode;
  /** Direction the panel slides in from. */
  from?: "bottom" | "left" | "right";
  delay?: number;
  once?: boolean;
  /** Wrap the content in a frosted panel (otherwise only the motion is applied). */
  panel?: boolean;
  className?: string;
}

const OFFSET = { bottom: { x: 0, y: 40 }, left: { x: -48, y: 0 }, right: { x: 48, y: 0 } } as const;

/**
 * Scroll-triggered entrance for glass surfaces: the panel slides in while its
 * content goes from blurred/defocused to sharp, with a soft overshoot.
 */
export function GlassReveal({ children, from = "bottom", delay = 0, once = true, panel = true, className }: GlassRevealProps) {
  const reduce = useReducedMotion();
  const o = OFFSET[from];

  return (
    <motion.div
      className={cn(panel && "da-stroke rounded-da-lg bg-da-surface shadow-da-lg backdrop-blur-da backdrop-saturate-150", className)}
      initial={reduce ? false : { opacity: 0, x: o.x, y: o.y, scale: 0.96, filter: "blur(14px)" }}
      whileInView={{ opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }}
      viewport={{ once, amount: 0.3 }}
      transition={{ delay, duration: 0.8, ease: [0.34, 1.3, 0.64, 1], filter: { duration: 0.6, ease: "easeOut", delay } }}
    >
      {children}
    </motion.div>
  );
}

export default GlassReveal;