"use client";
import { motion } from "framer-motion";
import { ReactNode } from "react";
import { CARD_VARIANTS, T } from "./MotionConfig";
import { useMotionContext } from "./MotionProvider";

interface AnimatedCardProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
}

export function AnimatedCard({ children, className, style, onClick }: AnimatedCardProps) {
  const { reducedMotion } = useMotionContext();

  if (reducedMotion) {
    return <div className={className} style={style} onClick={onClick}>{children}</div>;
  }

  return (
    <motion.div
      className={className}
      style={{ ...style, willChange: "transform" }}
      variants={CARD_VARIANTS}
      initial="rest"
      whileHover="hover"
      whileTap="tap"
      transition={T.card}
      onClick={onClick}
    >
      {children}
    </motion.div>
  );
}