import { COCO_EXAMPLES } from "../utils/coco-examples";

interface ExampleGalleryProps {
  onSelect: (url: string, prompt: string) => void;
  disabled?: boolean;
}

export function ExampleGallery({ onSelect, disabled }: ExampleGalleryProps) {
  return (
    <div className={disabled ? "opacity-50 pointer-events-none" : ""}>
      <p className="text-sm font-medium text-white/60 mb-3">
        Or try an example:
      </p>
      <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
        {COCO_EXAMPLES.map((example) => (
          <button
            key={example.label}
            onClick={() => onSelect(example.url, example.prompt)}
            className="group relative overflow-hidden rounded-xl border border-white/10 bg-white/5 transition-all hover:border-[#1a73e8]/60 hover:shadow-lg hover:shadow-[#1a73e8]/20 cursor-pointer"
          >
            <div className="aspect-square overflow-hidden">
              <img
                src={example.url}
                alt={example.label}
                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                loading="lazy"
              />
            </div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
              <span className="text-xs font-medium text-white">{example.label}</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}