1
'use client';
2

3
import React, { useState } from 'react';
4
import Image from 'next/image';
5
import { motion } from 'framer-motion';
6

7
const PlayingCards = ({ images }: { images: string[] }) => {
8
  const [isHovered, setIsHovered] = useState(false);
9

10
  return (
11
    <div
12
      onMouseEnter={() => setIsHovered(true)}
13
      onMouseLeave={() => setIsHovered(false)}
14
      className="relative h-[300px] max-w-[300px] w-full mx-auto p-5 rounded-lg transition-all duration-300 hover:translate-x-[10px]"
15
    >
16
      {images.map((image, i) => {
17
        return (
18
          <motion.div
19
            key={i}
20
            className="absolute top-0 left-0 w-full h-full border border-white/40 rounded-lg overflow-hidden"
21
            initial={{
22
              left: i * 10,
23
              rotate: (i - 1) * 3
24
            }}
25
            animate={{
26
              left: isHovered ? (i - 1) * 50 : i * 10,
27
              rotate: isHovered ? (i - 1) * 10 : (i - 1) * 3
28
            }}
29
            transition={{ duration: 0.3 }}
30
            style={{
31
              zIndex: images.length - i,
32
              transformOrigin: 'center center',
33
              boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
34
              opacity: 1 - i * 0.2,
35
              width: 'calc(100% - 16px)',
36
              height: 'calc(100% - 16px)'
37
            }}
38
          >
39
            <Image
40
              src={image}
41
              alt={`Stacked image ${i + 1}`}
42
              width={1000}
43
              height={1000}
44
              className="w-full h-full object-cover"
45
            />
46
          </motion.div>
47
        );
48
      })}
49
    </div>
50
  );
51
};
52

53
export default PlayingCards;