---
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Icon } from "astro-icon/components";

const isHebrew = Astro.currentLocale === "he";
const { images, class: className, imgClass } = Astro.props;
---

<div class={`bg-white ${className || ''}`}>
  <div class="mx-auto">
    <div class="swiper">
      <div class="swiper-wrapper">
        {
          images.map((image) => (
            <div class="swiper-slide">
              <div class="relative">
                {image.text && (
                  <div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute inset-0 flex items-center justify-center font-secondary z-10">
                    {image.text}
                  </div>
                )}
                <img
                  class={`w-full ${imgClass || ''}`}
                  src={image.image.url}
                  alt={image.text}
                />
                {image.text_alt && (
                  <div class="text-sm text-white px-4 py-2 italic bg-black/50 absolute bottom-2 right-2 rounded z-10">
                    {image.text_alt}
                  </div>
                )}
              </div>
            </div>
          ))
        }
      </div>

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

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev">
        {
          isHebrew && (
            <Icon name="ph:arrow-circle-right-thin" class="text-white" />
          )
        }
        {
          !isHebrew && (
            <Icon name="ph:arrow-circle-left-thin" class="text-white" />
          )
        }
      </div>
      <div class="swiper-button-next">
        {
          isHebrew && (
            <Icon name="ph:arrow-circle-left-thin" class="text-white" />
          )
        }
        {
          !isHebrew && (
            <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";

  // Re-initialize after every page swap via View Transitions
  document.addEventListener("astro:after-swap", init);

  function init() {
    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",
      },
    });
  }

  // Initialize on the first page load
  init();
</script>