import { ImageOff } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { ImageCard } from "./image-card"

export interface GeneratedImage {
  id: string
  url: string
  prompt: string
  model: string
  createdAt: string
  generationTime: number
  isFavorite: boolean
  data_ai_hint?: string
}

interface ImageGalleryProps {
  images: GeneratedImage[]
  isGenerating: boolean
  numImages: number
}

export function ImageGallery({
  images,
  isGenerating,
  numImages,
}: ImageGalleryProps) {
  return (
    <Card className="flex h-full flex-col">
      <CardContent className="flex-1 p-4">
        {isGenerating && images.length === 0 ? (
          <div className="grid h-full grid-cols-1 gap-4 md:grid-cols-2">
            {Array.from({ length: numImages }).map((_, i) => (
              <Skeleton key={i} className="aspect-square rounded-lg" />
            ))}
          </div>
        ) : images.length > 0 ? (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {images.map((image) => (
              <ImageCard key={image.id} image={image} />
            ))}
          </div>
        ) : (
          <div className="flex h-full flex-col items-center justify-center gap-4 text-center">
            <ImageOff className="h-16 w-16 text-muted-foreground" />
            <h3 className="text-xl font-semibold">No Images Yet</h3>
            <p className="text-muted-foreground">
              Your generated images will appear here.
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}