<script lang="ts">

    export interface GalleryImage {
        src: string;
        alt: string;
        desc: string;
    }

    let {
        images,
    }: {
        images: GalleryImage[];
    } = $props();

    let currentIndex: number = $state(0);

    function galleryBack() {
        if (currentIndex == 0) {
            currentIndex = images.length - 1;
        } else {
            currentIndex -= 1;
        }
    }

    function galleryForward() {
        if (currentIndex == images.length - 1) {
            currentIndex = 0;
        } else {
            currentIndex += 1;
        }
    }
</script>

<div class="gallery-container">
    <div class="gallery-button-container">
        <button onclick={galleryBack}>&lt;</button>
        <button onclick={galleryForward}>&gt;</button>
    </div>
    <img src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>

<style>
    .gallery-container {
        position: relative;
        max-width: var(--media-width);
        margin: 0 auto;
        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
    }

    .gallery-container img {
        width: 100%;
        object-fit: contain;
    }

    .gallery-button-container {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .gallery-button-container button {
        background-color: aqua;
        height: fit-content;
        cursor: pointer;
        font-size: 2.4rem;
        line-height: 2.4rem;
        padding: 8px;
    }
</style>