---
import { Image } from "astro:assets"
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Icon } from "astro-icon/components";
const { images, class: className } = Astro.props;
---

<div class="bg-white">
  <div class="mx-auto">
    <div class="swiper lg:h-200 md:h-150 h-100">
      <div class="swiper-wrapper">
        {
          images.map((image) => (
            <div class="swiper-slide h-full">
              <div class="flex!  h-full flex-col items-center justify-center relative">
                {image.text && (
                  <div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute font-secondary">
                    {image.text}
                  </div>
                )}
                <img class="w-full h-full object-cover object-center" src={image.image} alt={image.text} />
              </div>
            </div>
          ))
        }
      </div>

      <!-- If we need pagination -->
      <div class="swiper-pagination z-50"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev">
        <Icon name="ph:arrow-circle-left-thin" class="text-white" />
      </div>
      <div class="swiper-button-next">
        <Icon name="ph:arrow-circle-right-thin" class="text-white" />
      </div>
    </div>
  </div>
</div>

<script>
  import Swiper from "swiper";
  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
  const swiper = new Swiper(".swiper", {
    // Optional parameters
    modules: [Navigation, Pagination, Scrollbar],
    loop: true,

    // If we need pagination
    pagination: {
      el: ".swiper-pagination",
    },

    // Navigation arrows
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // And if we need scrollbar
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
</script>