Use Animation Controls

"use client"

import { useState, useEffect } from "react"
import { useAnimate } from "framer-motion"
import { useTheme } from "next-themes"

export function useAnimationControls() {
  const [scope, animate] = useAnimate()
  const [isHovered, setIsHovered] = useState(false)
  const { resolvedTheme } = useTheme()

  useEffect(() => {
    if (!scope.current) return // Ensure the DOM element is mounted

    if (isHovered) {
      animate(
        scope.current,
        {
          y: -5,
          scale: 1.02,
          boxShadow:
            resolvedTheme === "dark"
              ? "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)"
              : "0 20px 25px -5px rgba(251, 191, 36, 0.1), 0 10px 10px -5px rgba(251, 191, 36, 0.04)",
        },
        { type: "spring", stiffness: 300, damping: 20 }
      )
    } else {
      animate(
        scope.current,
        {
          y: 0,
          scale: 1,
          boxShadow:
            resolvedTheme === "dark"
              ? "0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)"
              : "0 10px 15px -3px rgba(251, 191, 36, 0.1), 0 4px 6px -2px rgba(251, 191, 36, 0.05)",
        },
        { type: "spring", stiffness: 300, damping: 20 }
      )
    }
  }, [isHovered, animate, scope, resolvedTheme])

  return {
    scope,
    handleMouseEnter: () => setIsHovered(true),
    handleMouseLeave: () => setIsHovered(false),
  }
}