import { useState } from "react";
import { motion } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";
const images = [
"https://images.pexels.com/photos/2724749/pexels-photo-2724749.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/2724748/pexels-photo-2724748.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/1358900/pexels-photo-1358900.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&w=600"
];
export default function ImageCarousel() {
const [selected, setSelected] = useState(null);
const [index, setIndex] = useState(0);
const nextSlide = () => {
setIndex((prev) => (prev + 1) % images.length);
};
const prevSlide = () => {
setIndex((prev) => (prev - 1 + images.length) % images.length);
};
return (
{/* Carousel Controls */}
{/* Image Container */}
{images.map((img, i) => (
setSelected(selected === i ? null : i)}
>
))}
);
}