"use client";

import { motion } from "framer-motion";
import type { ReactNode, CSSProperties } from "react";
import { cardReveal, staggerCards, viewport20 } from "@/lib/animations";

type Props = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
};

export function AnimatedGrid({ children, className, style }: Props) {
  return (
    <motion.div
      className={className}
      style={style}
      variants={staggerCards}
      initial="hidden"
      whileInView="visible"
      viewport={viewport20}
    >
      {children}
    </motion.div>
  );
}

const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];

export function AnimatedCard({ children, className, style }: Props) {
  return (
    <motion.div
      className={className}
      style={style}
      variants={cardReveal}
      whileHover={{ y: -4, transition: { duration: 0.22, ease: EASE } }}
      whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
    >
      {children}
    </motion.div>
  );
}
