'use client';

import { useState } from 'react';
import { Image as ImageIcon } from 'lucide-react';

type BranchGalleryProps = {
  images: string[] | null | undefined;
  className?: string;
};

export function BranchGallery({ images, className }: BranchGalleryProps) {
  const [showAll, setShowAll] = useState(false);

  if (!images || images.length === 0) {
    return (
      <div className={`flex items-center justify-center rounded-lg bg-slate-100 p-8 text-center text-slate-500 dark:bg-zinc-800 dark:text-zinc-400 ${className}`}>
        <div className="flex flex-col items-center">
          <ImageIcon size={24} className="mb-2" />
          <p className="text-sm">Galeri fotoğrafı yok</p>
        </div>
      </div>
    );
  }

  const displayImages = showAll ? images : images.slice(0, 4);

  return (
    <div className={className}>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
        {displayImages.map((image, index) => (
          <div key={index} className="aspect-square overflow-hidden rounded-lg">
            <img
              src={image}
              alt={`Galeri ${index + 1}`}
              className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
              onError={(e) => (e.currentTarget.style.display = 'none')}
            />
          </div>
        ))}
      </div>

      {images.length > 4 && !showAll && (
        <button
          type="button"
          onClick={() => setShowAll(true)}
          className="mt-2 text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
        >
          Tümünü göster ({images.length - 4} daha)
        </button>
      )}
    </div>
  );
}