"use client";

import React, { useState } from 'react';
import Image from 'next/image';

interface ProductGalleryProps {
  image: string;
  name: string;
  images?: string[]; // opcjonalna dodatkowa galeria z contentu, u nas na razie w mocku mamy 1 image
}

export function ProductGallery({ image, name, images }: ProductGalleryProps) {
  const [mainImage, setMainImage] = useState(image || '/images/hero/shop-section-image.webp');

  const gallery = images && images.length > 0 
    ? images 
    : [image, '/images/hero/shop-section-image.webp']; 

  return (
    <div className="flex flex-col gap-4">
      <div className="relative aspect-square w-full bg-slate-50 rounded-2xl border border-border overflow-hidden flex items-center justify-center p-8">
        <Image
          src={mainImage}
          alt={name}
          width={800}
          height={800}
          className="object-contain w-full h-full"
          priority
        />
      </div>

      {gallery.length > 1 && (
        <div className="flex gap-4 overflow-x-auto pb-2">
          {gallery.map((img, idx) => (
            <button
              key={idx}
              onClick={() => setMainImage(img)}
              className={`relative w-24 h-24 shrink-0 rounded-xl border-2 overflow-hidden bg-slate-50 p-2 transition-all ${mainImage === img ? 'border-primary' : 'border-border hover:border-primary/50'}`}
            >
              <Image
                src={img}
                alt={`${name} - miniatura ${idx + 1}`}
                fill
                className="object-contain"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}