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

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

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

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

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

    {(groupToShow.images.length > 1) && (
        <!-- Slider indicators -->
            <div class="absolute z-30 flex -translate-x-1/2 bottom-2 left-1/2 space-x-3 rounded-full">
                {
                    groupToShow.images.map((_, index) => (
                            <button type="button"
                                    class="w-3 h-3 rounded-full bg-black hover:bg-caperren-green-light"
                                    aria-current={index ? "false" : "true"}
                                    aria-label={index.toString()}
                                    data-custom-carousel-slide-to={index}></button>
                    ))
                }
            </div>
        <!-- Slider controls -->
            <button
                    type="button"
                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-custom-carousel-prev
            >
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
            <svg
                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    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="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-custom-carousel-next
            >
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
            <svg
                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light "
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    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>
    )}
</custom-carousel>

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