import React from 'react';
import { ImageItem } from '../types';
import ImageCard from './ImageCard';

interface MasonryGridProps {
  images: ImageItem[];
  onImageClick: (image: ImageItem) => void;
  onLike: (image: ImageItem) => void;
  currentUser?: string;
}

const MasonryGrid: React.FC<MasonryGridProps> = ({ images, onImageClick, onLike, currentUser }) => {
  return (
    <div className="w-full px-4 md:px-8 py-6">
      <div className="columns-2 md:columns-3 lg:columns-4 xl:columns-5 gap-4 space-y-4">
        {images.map((img) => (
          <ImageCard 
            key={img.id} 
            image={img} 
            onClick={onImageClick} 
            onLike={onLike}
            currentUser={currentUser}
          />
        ))}
      </div>
      
      {images.length === 0 && (
        <div className="flex flex-col items-center justify-center h-64 text-gray-400">
          <p>暂无图片，快来生成第一张吧！</p>
        </div>
      )}
    </div>
  );
};

export default MasonryGrid;