"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";

export function InteractiveCard({
  href,
  className,
  children,
}: {
  href: string;
  className?: string;
  children: React.ReactNode;
}) {
  const [ready, setReady] = useState(false);
  const reduce = useReducedMotion();

  useEffect(() => {
    setReady(true);
  }, []);

  const inner = (
    <Link href={href} className={`card card-interactive ${className || ""}`}>
      {children}
    </Link>
  );

  if (!ready || reduce) {
    return <div className="h-full">{inner}</div>;
  }

  return (
    <motion.div
      className="h-full"
      whileHover={{
        y: -6,
        scale: 1.015,
        transition: { type: "spring", stiffness: 380, damping: 22 },
      }}
      whileTap={{ scale: 0.985 }}
    >
      {inner}
    </motion.div>
  );
}