---
import { Image } from 'astro:assets';

type Props = {
  photos: ImageMetadata[];
  title: string;
};

const { photos, title } = Astro.props;
---

<section class="relative" aria-label="Automobilio nuotraukos" data-gallery>
  <div class="no-scrollbar flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-[2rem] scroll-smooth bg-wash" data-gallery-track>
    {photos.map((photo, index) => (
      <Image
        src={photo}
        alt={`${title} nuotrauka ${index + 1}`}
        width={960}
        height={720}
        loading={index < 2 ? 'eager' : 'lazy'}
        format="avif"
        class="aspect-[4/3] min-w-full snap-center object-cover"
      />
    ))}
  </div>
  <p class="absolute bottom-4 right-4 rounded-full bg-ink/80 px-3 py-1 text-xs font-semibold text-paper tabular" data-gallery-counter>
    1 / {photos.length}
  </p>
</section>

<script is:inline>
  document.querySelectorAll('[data-gallery]').forEach((gallery) => {
    const track = gallery.querySelector('[data-gallery-track]');
    const counter = gallery.querySelector('[data-gallery-counter]');
    if (!track || !counter) return;
    const total = track.children.length;
    track.addEventListener(
      'scroll',
      () => {
        const index = Math.round(track.scrollLeft / track.clientWidth) + 1;
        counter.textContent = `${Math.min(Math.max(index, 1), total)} / ${total}`;
      },
      { passive: true },
    );
  });
</script>
