import Image from "next/image";
import styles from "./BentoGallery.module.css";

interface GalleryImage {
  src: string;
  alt: string;
}

interface BentoGalleryProps {
  images: GalleryImage[];
}

export default function BentoGallery({ images }: BentoGalleryProps) {
  const items = images.slice(0, 6);

  return (
    <section className={styles.gallerySection} aria-label="Bildergalerie">
      <div className={styles.inner}>
        <div className={styles.grid}>
          {items.map((image, index) => (
            <div key={image.src} className={styles.item} data-index={index}>
              <div className={styles.frame}>
                <Image
                  src={image.src}
                  alt={image.alt}
                  fill
                  className={styles.image}
                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
                  priority={index === 0}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}