import React, { useState } from 'react';
import { X } from 'lucide-react';
const bookCovers = [
{ id: 1, src: "https://fluxie.de/wp-content/uploads/2024/09/Cover-1.png", alt: "Leo und der rote Blitz", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Leo-Doppelseite-1.png" },
{ id: 2, src: "https://fluxie.de/wp-content/uploads/2024/09/Cover-2.png", alt: "Flocke", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Hund-Flocke-Doppelseite.png" },
{ id: 3, src: "https://fluxie.de/wp-content/uploads/2024/10/Cover.png", alt: "Schnüffel", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Schueffelnase-Doppelseite.png" },
{ id: 4, src: "https://fluxie.de/wp-content/uploads/2024/10/cover-1.png", alt: "Lili", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Drache-Doppelseite.png" },
{ id: 5, src: "https://fluxie.de/wp-content/uploads/2024/10/Cover-2.png", alt: "Feuerhörnchen", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Feuerhoernchen-Einsatz-Doppelseite.png" },
{ id: 6, src: "https://fluxie.de/wp-content/uploads/2024/10/Benjamin.jpg", alt: "Benjamin", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Benjamin-Doppelseite.jpg" },
{ id: 7, src: "https://fluxie.de/wp-content/uploads/2024/10/conni.jpg", alt: "Conni", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/conni-Doppelseite.jpg" },
{ id: 8, src: "https://fluxie.de/wp-content/uploads/2024/10/faultier.jpg", alt: "Faultier", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/faultier-doppelseite.jpg" },
{ id: 9, src: "https://fluxie.de/wp-content/uploads/2024/10/fragezeichen.jpg", alt: "Fragezeichen", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/fragezeichen-doppelseite.jpg" },
{ id: 10, src: "https://fluxie.de/wp-content/uploads/2024/10/peppa.jpg", alt: "Peppa", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/peppa-Doppelseite.jpg" },
{ id: 11, src: "https://fluxie.de/wp-content/uploads/2024/10/Pettersson-und-Findus.jpg", alt: "Pettersson und Findus", lightboxSrc: "https://fluxie.de/wp-content/uploads/2024/10/Pettersson-und-Findus-Doppelseite.jpg" },
];
const BookCoverGrid = () => {
const [selectedBook, setSelectedBook] = useState(null);
const handleBookClick = (book) => {
setSelectedBook(book);
};
const closeLightbox = () => {
setSelectedBook(null);
};
return (
{bookCovers.map((book) => (

handleBookClick(book)}
/>
))}
{selectedBook && (
)}
);
};
export default BookCoverGrid;