import React from 'react';
import { GalleryItem } from '../types';
import { PhotoIcon, VideoCameraIcon } from './icons'; // Assuming these exist or will be added

interface GalleryComponentProps {
  items: GalleryItem[] | undefined;
  title?: string;
}

const GalleryComponent: React.FC<GalleryComponentProps> = ({ items, title }) => {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <div className="py-8 md:py-12">
      {title && (
        <h2 className="font-quicksand text-2xl sm:text-3xl font-bold text-slate-800 mb-6 md:mb-8 text-center">
          {title}
        </h2>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        {items.map((item) => (
          <div key={item.id} className="group relative bg-slate-100 rounded-lg overflow-hidden">
            <div className="aspect-[16/9] w-full">
              {item.type === 'image' ? (
                <img
                  src={item.url}
                  alt={item.altText || item.caption || 'Gallery image'}
                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                  loading="lazy"
                />
              ) : item.type === 'video' ? (
                <video
                  src={item.url}
                  controls
                  className="w-full h-full object-cover"
                  poster={item.altText} // Use altText as poster if available
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center bg-slate-200">
                  <PhotoIcon className="w-16 h-16 text-slate-400" /> {/* Fallback icon */}
                </div>
              )}
            </div>
            {item.caption && (
              <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent transition-opacity duration-300 opacity-0 group-hover:opacity-100">
                <p className="text-white text-sm font-inter leading-snug line-clamp-2">{item.caption}</p>
              </div>
            )}
            {/* Icon overlay for type indication, optional */}
            <div className="absolute top-2 right-2 p-1.5 bg-black/40 rounded-full text-white opacity-80 group-hover:opacity-100 transition-opacity duration-300">
              {item.type === 'image' ? <PhotoIcon className="w-4 h-4" /> : <VideoCameraIcon className="w-4 h-4" />}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GalleryComponent;