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

import type { carouselGroup } from "@interfaces/image-carousel.ts";

const groupToShow: carouselGroup = Astro.props.carouselGroup;
---

<custom-carousel
  class="relative flex w-full flex-col"
  data-custom-carousel={groupToShow.animation}
  data-custom-carousel-interval={groupToShow.interval}
>
  <!-- Modal for fullscreen viewing -->
  <div
    tabindex="-1"
    aria-hidden="true"
    class="fixed inset-0 z-100 hidden w-full items-center justify-center"
    data-custom-carousel-modal
  >
    <div class="relative h-full w-full p-4">
      <!-- Modal content -->
      <div
        class="border-caperren-green relative h-full max-h-screen max-w-screen rounded-lg border-2 bg-black shadow-sm"
      >
        <!-- Modal header -->
        <div class="flex items-center justify-between rounded-t p-1">
          <button
            type="button"
            class="text-caperren-green ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light z-100 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm ring-2"
            data-custom-carousel-modal-hide
          >
            <svg
              class="h-3 w-3"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 14 14"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
            </svg>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div
          class="flex h-full w-full items-center justify-center overflow-hidden"
          data-custom-carousel-modal-image
        >
        </div>
      </div>
    </div>
  </div>

  <!-- Carousel wrapper -->
  <div class="relative h-56 w-full overflow-hidden md:h-120">
    {
      groupToShow.images.map((image, index) => (
        <div
          class="hidden duration-1500 ease-in-out"
          data-custom-carousel-item={index}
        >
          <Image
            src={image}
            class="absolute inset-0 m-auto h-full max-h-full w-auto max-w-full object-contain"
            alt="..."
            layout="constrained"
            loading="eager"
          />
        </div>
      ))
    }
  </div>

  <!-- Slider indicators -->
  {
    groupToShow.images.length > 1 && (
      <div>
        <div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
          {groupToShow.images.map((_, index) => (
            <button
              type="button"
              class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
              aria-current={index ? "false" : "true"}
              aria-label={index.toString()}
              data-custom-carousel-slide-to={index}
            />
          ))}
        </div>
        <button
          type="button"
          class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
          data-custom-carousel-prev
        >
          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
            <svg
              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 6 10"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 1 1 5l4 4"
              />
            </svg>
            <span class="hidden">Previous</span>
          </span>
        </button>
        <button
          type="button"
          class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
          data-custom-carousel-next
        >
          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
            <svg
              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 6 10"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 9 4-4-4-4"
              />
            </svg>
            <span class="hidden">Next</span>
          </span>
        </button>
      </div>
    )
  }
</custom-carousel>

<script src="./custom-carousel.ts"></script>