'use client'; import React, { useState, useEffect } from 'react'; import Image from 'next/image'; import { motion } from 'framer-motion'; import { cn } from "@/lib/utils" interface CardImage { src: string; alt: string; } interface CardStackProps { images: CardImage[]; className?: string; cardWidth?: number; cardHeight?: number; spacing?: { x?: number; y?: number; }; } interface CardProps extends CardImage { index: number; isHovered: boolean; isFirstCard?: boolean; isMobile: boolean; isFront?: boolean; frontCardIndex: number | null; onClick: (index: number) => void; width: number; height: number; spacing: { x?: number; y?: number }; } const Card = ({ src, alt, index, isHovered, isMobile, isFront, frontCardIndex, onClick, width, height, spacing }: CardProps) => { return ( onClick(index)} > {alt}

); }; export function CardStack3D({ images, className, cardWidth = 320, cardHeight = 192, spacing = { x: 50, y: 50 } }: CardStackProps) { const [isHovered, setIsHovered] = useState(false); const [isMobile, setIsMobile] = useState(false); const [frontCardIndex, setFrontCardIndex] = useState(null); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {images.map((image, index) => ( setFrontCardIndex(prev => prev === idx ? null : idx)} width={cardWidth} height={cardHeight} spacing={spacing} /> ))}

); }