'use client'

import { useState } from 'react'
import Image from 'next/image'

interface BoatImageGalleryProps {
  images: string[]
  name: string
}

export default function BoatImageGallery({ images, name }: BoatImageGalleryProps) {
  const [selectedIndex, setSelectedIndex] = useState(0)

  return (
    <>
      <div className="relative h-80 md:h-[70vh] min-h-[320px] max-h-[600px] bg-gray-100">
        <Image
          src={images[selectedIndex]}
          alt={name}
          fill
          className="object-contain object-center"
          priority={selectedIndex === 0}
          quality={80}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
          placeholder="blur"
          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
        />
      </div>
      {images.length > 1 && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-2 p-4 bg-gray-50">
          {images.map((img, i) => (
            <button
              key={i}
              type="button"
              onClick={() => setSelectedIndex(i)}
              className={`relative aspect-video rounded-lg overflow-hidden transition-all ${
                selectedIndex === i
                  ? 'ring-2 ring-blue-600 ring-offset-2'
                  : 'opacity-80 hover:opacity-100'
              }`}
            >
              <Image
                src={img}
                alt={`${name} - zdjęcie ${i + 1}`}
                fill
                className="object-cover object-center"
                loading="lazy"
                sizes="(max-width: 768px) 50vw, 120px"
              />
            </button>
          ))}
        </div>
      )}
    </>
  )
}