"use client" import * as React from "react" import Image from "next/image" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" interface ProductImagesProps { id: string color: string images: string[] } interface ProductCardImagesProps { productImages: ProductImagesProps[] activeColor: number activeImage: number handleMouse: (event: "enter" | "leave") => void className?: string } const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 } } function useSetActiveProduct(initialColor = 0) { const [state, setState] = React.useState({ activeColor: initialColor, activeImage: 0, }) const handleColorChange = React.useCallback((index: number) => { setState((prev) => ({ ...prev, activeColor: index })) }, []) const handleMouse = React.useCallback((event: "enter" | "leave") => { setState((prev) => ({ ...prev, activeImage: event === "enter" ? 1 : 0, })) }, []) return { ...state, handleColorChange, handleMouse, } } function ProductCardImages({ productImages, activeColor, activeImage, handleMouse, className, }: ProductCardImagesProps) { const handleMouseEnter = () => handleMouse("enter") const handleMouseLeave = () => handleMouse("leave") return (

{productImages.map((productImage, index) => (

))}

) } const springTransition = { type: "spring", stiffness: 500, damping: 50, mass: 1, } interface ProductColorsThumbsProps { productId: string productColors: string[] activeColor: number setActiveColor: (index: number) => void className?: string } function ProductColorsThumbs({ productId, productColors, activeColor, setActiveColor, className }: ProductColorsThumbsProps) { return (

{productColors.map((productColor, index) => ( ))}

) } interface ProductCardProps { id: string images: ProductImagesProps[] colors: string[] className?: string } export function ProductCard({ id, images, colors, className, }: ProductCardProps) { const { activeColor, activeImage, handleColorChange, handleMouse } = useSetActiveProduct() return (

) }