
import React, { useState } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { X } from 'lucide-react';

export function StatusUpdateImageThumbnail({ images = [] }) {
  const [selectedImage, setSelectedImage] = useState(null);

  const safeImages = Array.isArray(images) ? images : [];

  if (!safeImages || safeImages.length === 0) return null;

  return (
    <>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mt-4">
        {safeImages.map((url, index) => (
          <div 
            key={`${url}-${index}`}
            className="relative aspect-video group cursor-zoom-in rounded-md overflow-hidden border border-border bg-muted shadow-sm hover:shadow-md transition-all"
            onClick={() => setSelectedImage(url)}
          >
            <img
              src={url}
              alt={`Attachment ${index + 1}`}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
              loading="lazy"
              onError={(e) => {
                e.target.onerror = null; 
                e.target.src = "https://placehold.co/400x300?text=Image+Error";
              }}
            />
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
          </div>
        ))}
      </div>

      <Dialog open={!!selectedImage} onOpenChange={() => setSelectedImage(null)}>
        <DialogContent className="max-w-4xl w-full p-0 bg-transparent border-none shadow-none overflow-hidden flex items-center justify-center">
            <div className="relative">
                 <button 
                    onClick={() => setSelectedImage(null)}
                    className="absolute -top-10 right-0 p-2 text-white hover:text-muted transition-colors"
                >
                    <X className="w-6 h-6" />
                </button>
                {selectedImage && (
                    <img 
                        src={selectedImage} 
                        alt="Full size preview" 
                        className="max-h-[85vh] w-auto object-contain rounded-lg shadow-2xl"
                    />
                )}
            </div>
        </DialogContent>
      </Dialog>
    </>
  );
}
