FloatingCard

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type FloatingCardProps = {
  children: ReactNode;
  className?: string;
  /** How high the card rises, in pixels. */
  distance?: number;
  /** Seconds for one rise and fall. */
  duration?: number;
  /** Seconds to wait before starting, to put several cards out of step. */
  delay?: number;
};

/* FloatingCard: the card bobs gently in the air; its shadow shrinks as it rises. */
export function FloatingCard({
  children,
  className = "rounded-2xl border border-white/10 bg-[#16132a] p-6 text-white",
  distance = 12,
  duration = 4,
  delay = 0,
}: FloatingCardProps) {
  const reduce = useReducedMotion();
  const loop = { duration, delay, repeat: Infinity, ease: "easeInOut" } as const;

  return (
    <div className="relative pb-6">
      <motion.div
        className={className}
        animate={reduce ? undefined : { y: [0, -distance, 0] }}
        transition={loop}
      >
        {children}
      </motion.div>
      <motion.div
        aria-hidden
        className="absolute inset-x-[12%] bottom-0 h-3 rounded-[50%] bg-black/50 blur-md"
        animate={reduce ? undefined : { scaleX: [1, 0.8, 1], opacity: [0.8, 0.45, 0.8] }}
        transition={loop}
      />
    </div>
  );
}