"use client";
import { motion } from "framer-motion";
import { useState } from "react";

export function HoverCard() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="relative w-64 h-80 rounded-2xl bg-[#0a0a0a] border border-border overflow-hidden cursor-pointer"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <motion.div 
        initial={{ opacity: 0, scale: 1.1 }}
        animate={{ opacity: isHovered ? 1 : 0, scale: isHovered ? 1 : 1.1 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        className="absolute inset-0 bg-gradient-to-tr from-zinc-800 to-zinc-950 z-0"
      />
      <div className="absolute inset-0 p-6 flex flex-col justify-end z-10">
        <motion.h3 
          animate={{ y: isHovered ? 0 : 10, opacity: isHovered ? 1 : 0.7 }}
          transition={{ duration: 0.3 }}
          className="text-xl font-medium text-foreground"
        >
          Hover Me
        </motion.h3>
        <motion.div 
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: isHovered ? 1 : 0, height: isHovered ? "auto" : 0 }}
          transition={{ duration: 0.3 }}
          className="overflow-hidden"
        >
          <p className="text-sm text-muted-foreground mt-2">
            Smooth gradient and text reveal transitions on hover.
          </p>
        </motion.div>
      </div>
    </div>
  );
}