Image Pile

"use client";

import { useState } from "react";
import { motion } from "framer-motion";

interface ImagePileProps {
    images: Array<{ src: string; alt: string }>;
}

export function ImagePile({ images }: ImagePileProps) {
    const [picked, setPicked] = useState<number | null>(null);

    // Preset random rotations for each image in the pile
    const rotations = [-8, 4, -3, 7, -5, 2];

    return (
        <div
            className="relative flex items-center justify-center"
            style={{ width: 260, height: 300 }}
        >
            {images.slice(0, 6).map((img, i) => {
                const isPicked = picked === i;
                const rot = rotations[i % rotations.length];
                const zIndex = picked === null ? images.length - i : isPicked ? 20 : images.length - i;

                return (
                    <motion.div
                        key={i}
                        className="absolute w-48 h-60 rounded-xl overflow-hidden shadow-2xl border border-white/10 cursor-pointer"
                        initial={{ rotate: rot }}
                        animate={{
                            rotate: isPicked ? 0 : rot,
                            y: isPicked ? -60 : 0,
                            scale: isPicked ? 1.08 : 1 - i * 0.02,
                            zIndex,
                        }}
                        whileHover={{ scale: isPicked ? 1.08 : (1 - i * 0.02) + 0.03 }}
                        transition={{ type: "spring", stiffness: 400, damping: 30 }}
                        onClick={() => setPicked(isPicked ? null : i)}
                        style={{ zIndex }}
                    >
                        <img src={img.src} alt={img.alt} className="w-full h-full object-cover" />
                    </motion.div>
                );
            })}
        </div>
    );
}