"use client"; import React, { useState, useRef } from "react"; import { motion, AnimatePresence } from "motion/react"; export const InteractiveImageSlider = ({ items }: { items: string[] }) => { const [activeIndex, setActiveIndex] = useState(0); const [direction, setDirection] = useState(0); const containerRef = useRef(null); const prevMouseX = useRef(0); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const width = rect.width; const percentage = x / width; const mouseDirection = e.clientX - prevMouseX.current; prevMouseX.current = e.clientX; if (mouseDirection !== 0) { setDirection(mouseDirection); } if (percentage < 0.33) { setActiveIndex(0); } else if (percentage < 0.66) { setActiveIndex(1); } else { setActiveIndex(2); } }; const getVariants = (index: number) => { const isActive = index === activeIndex; const offset = (index - activeIndex) * 100; return { initial: { x: direction > 0 ? "100%" : "-100%", opacity: 0, rotateY: direction > 0 ? 45 : -45 }, animate: { x: isActive ? "0%" : `${offset}%`, opacity: isActive ? 1 : 0.3, rotateY: 0, zIndex: isActive ? 3 : index < activeIndex ? 1 : 2 }, exit: { x: direction > 0 ? "-100%" : "100%", opacity: 0, rotateY: direction > 0 ? -45 : 45 } }; }; return (

{items.map((image, index) => ( {`Product

))}

{items.map((_, index) => (

))}

); };