---
import { Icon } from "astro-icon/components";

const { items = [] } = Astro.props;
---

<div data-ride="carousel" class="relative">
  <button
    data-toggle="prev"
    class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
    aria-label="Anterior"
  >
    <Icon name="chevron-left" class="size-6" />
  </button>

  <button
    data-toggle="next"
    class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
    aria-label="Próximo"
  >
    <Icon name="chevron-right" class="size-6" />
  </button>

  <div
    class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
  >
    {
      items.map((Component, idx) => (
        <div
          class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
          id={`slide${idx + 1}`}
        >
          <Component class="size-48 lg:size-38 fill-white" />
        </div>
      ))
    }
  </div>
</div>

<script>
  const carousel = document.querySelector("[data-ride=carousel]");
  const slides = carousel?.querySelectorAll(".snap-center");
  let currentIndex = 0;

  const scrollToSlide = (index: number) => {
    if (!slides) {
      return;
    }

    if (index >= 0 && index < slides.length) {
      slides[index].scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center",
      });
      currentIndex = index;
    }
  };

  carousel
    ?.querySelector("[data-toggle=prev]")
    ?.addEventListener("click", () => {
      scrollToSlide(currentIndex - 1);
    });

  carousel
    ?.querySelector("[data-toggle=next]")
    ?.addEventListener("click", () => {
      scrollToSlide(currentIndex + 1);
    });
</script>