webseite_BB-Apartment2026/components/ui/ImageGallery.tsx

"use client";

import { useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";

interface ImageGalleryProps {
  images: string[];
  alt: string;
}

export function ImageGallery({ images, alt }: ImageGalleryProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const hasImages = images.length > 0;

  const handlePrevious = () => {
    setActiveIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setActiveIndex((prev) => (prev + 1) % images.length);
  };

  return (
    <div className="space-y-4">
      <div className="relative h-80 md:h-[500px] rounded-2xl overflow-hidden bg-brand-grey-soft">
        {hasImages && (
          <Image
            src={images[activeIndex]}
            alt={`${alt} - ${activeIndex + 1}`}
            fill
            className="object-cover"
          />
        )}
        {images.length > 1 && (
          <>
            <button
              onClick={handlePrevious}
              className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
              aria-label="Vorheriges Bild"
            >
              <ChevronLeft className="w-5 h-5 text-brand-grey-dark" />
            </button>
            <button
              onClick={handleNext}
              className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
              aria-label="Nächstes Bild"
            >
              <ChevronRight className="w-5 h-5 text-brand-grey-dark" />
            </button>
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
              {images.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setActiveIndex(index)}
                  className={`w-2 h-2 rounded-full transition-all ${
                    index === activeIndex
                      ? "bg-white scale-110"
                      : "bg-white/50 hover:bg-white/80"
                  }`}
                  aria-label={`Zu Bild ${index + 1} wechseln`}
                />
              ))}
            </div>
          </>
        )}
      </div>

      {images.length > 1 && (
        <div className="flex gap-3 overflow-x-auto pb-2">
          {images.map((image, index) => (
            <button
              key={image}
              onClick={() => setActiveIndex(index)}
              className={`relative w-20 h-20 flex-shrink-0 rounded-xl overflow-hidden ${
                index === activeIndex
                  ? "ring-2 ring-brand-green"
                  : "ring-2 ring-transparent opacity-70 hover:opacity-100"
              }`}
            >
              <Image
                src={image}
                alt={`${alt} - Vorschau ${index + 1}`}
                fill
                className="object-cover"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}