"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 || 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&q=80');

  // Tworzymy tablicę miniatur, używamy placeholdera jako drugiej by pokazać funkcjonalność
  const gallery = images && images.length > 0 
    ? images 
    : [image, 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&q=80']; 

  return (
    <div className="flex flex-col gap-4">
      {/* Główne zdjęcie */}
      <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>

      {/* Miniatury */}
      {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>
  );
}