---
import { urlFor } from '../sanity/imageUrl';

interface Props {
  images: any[];
}

const { images } = Astro.props;
---

{images && images.length > 0 ? (
  <div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-[--spacing-md] md:gap-[--spacing-sm] mt-[--spacing-lg]">
    {images.map((image) => (
      <div class="relative overflow-hidden rounded-lg shadow-[0_4px_10px_rgba(0,0,0,0.2)] transition-all duration-300 aspect-[4/3] hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] group">
        <img src={urlFor(image)} alt="Theater photo" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
      </div>
    ))}
  </div>
) : (
  <div class="text-center p-[--spacing-xl] bg-white/10 rounded-lg italic">
    <p class="placeholder-de m-0 text-lg" data-lang="de">Fotos werden bald hinzugefügt. Besuchen Sie uns später wieder!</p>
    <p class="placeholder-en m-0 text-lg" data-lang="en">Photos will be added soon. Check back later!</p>
  </div>
)}