---
import type { HomepageBannerImage } from '../lib/fallback-data';

type Props = {
  images: HomepageBannerImage[];
};

const { images } = Astro.props;
const slides = images.length > 0 ? images : [{ src: '/images/banner.png', alt: 'Swansea Airport banner' }];
---

<div class="banner-rotator" data-banner-rotator>
  {slides.map((image, index) => (
    <img
      class:list={['banner-slide', { active: index === 0 }]}
      src={image.src}
      alt={image.alt}
      loading={index === 0 ? 'eager' : 'lazy'}
      decoding="async"
      data-banner-slide
    />
  ))}
</div>

{slides.length > 1 && (
  <script>
    (() => {
      const root = document.querySelector('[data-banner-rotator]');
      if (!root || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

      const slides = Array.from(root.querySelectorAll('[data-banner-slide]'));
      if (slides.length < 2) return;

      let currentIndex = 0;
      window.setInterval(() => {
        slides[currentIndex].classList.remove('active');
        currentIndex = (currentIndex + 1) % slides.length;
        slides[currentIndex].classList.add('active');
      }, 3500);
    })();
  </script>
)}

<style>
  .banner-rotator {
    position: relative;
    width: 100%;
    min-height: clamp(9rem, 21vw, 16rem);
    overflow: hidden;
    isolation: isolate;
    background: #dcecff;
  }

  .banner-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    transition:
      opacity 1.1s ease,
      transform 7s ease;
  }

  .banner-slide.active {
    opacity: 1;
    transform: scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .banner-slide {
      transition: none;
    }
  }
</style>