Pixelated Carousel

"use client";

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

interface PixelatedCarouselProps {
    slides: Array<{ src: string; title: string; subtitle?: string }>;
}

export function PixelatedCarousel({ slides }: PixelatedCarouselProps) {
    const [current, setCurrent] = useState(0);
    const [direction, setDirection] = useState(1);
    const [transitioning, setTransitioning] = useState(false);

    const go = (next: number) => {
        if (transitioning) return;
        setDirection(next > current ? 1 : -1);
        setTransitioning(true);
        setCurrent(next);
        setTimeout(() => setTransitioning(false), 500);
    };

    const prev = () => go((current - 1 + slides.length) % slides.length);
    const next = () => go((current + 1) % slides.length);

    return (
        <div className="relative w-full overflow-hidden rounded-2xl border border-white/10 aspect-video bg-zinc-950">
            <AnimatePresence mode="wait" custom={direction}>
                <motion.div
                    key={current}
                    custom={direction}
                    initial={{ opacity: 0, filter: "blur(20px) saturate(0)", scale: 1.04 }}
                    animate={{ opacity: 1, filter: "blur(0px) saturate(1)", scale: 1 }}
                    exit={{ opacity: 0, filter: "blur(20px) saturate(0)", scale: 0.96 }}
                    transition={{ duration: 0.5, ease: "easeInOut" }}
                    className="absolute inset-0"
                >
                    <img
                        src={slides[current].src}
                        alt={slides[current].title}
                        className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-8">
                        <div>
                            <h3 className="text-white text-2xl font-bold">{slides[current].title}</h3>
                            {slides[current].subtitle && (
                                <p className="text-zinc-300 text-sm mt-1">{slides[current].subtitle}</p>
                            )}
                        </div>
                    </div>
                </motion.div>
            </AnimatePresence>

            {/* Controls */}
            <button onClick={prev} className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/40 backdrop-blur border border-white/10 text-white flex items-center justify-center hover:bg-black/60 transition-colors z-10" aria-label="Previous">‹</button>
            <button onClick={next} className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/40 backdrop-blur border border-white/10 text-white flex items-center justify-center hover:bg-black/60 transition-colors z-10" aria-label="Next">›</button>

            {/* Dots */}
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
                {slides.map((_, i) => (
                    <button key={i} onClick={() => go(i)} className={`h-1.5 rounded-full transition-all duration-300 ${i === current ? "w-6 bg-white" : "w-1.5 bg-white/40 hover:bg-white/60"}`} aria-label={`Go to slide ${i + 1}`} />
                ))}
            </div>
        </div>
    );
}