<script lang="ts">
    import { onMount, type Snippet } from "svelte"

    interface CarouselProps {
        gap?: string
        scrollAmount?: number
        containerClass?: string
        wrapperClass?: string
        fullWidth?: boolean
        /** Max width for the navigation arrows container (default: none) */
        maxWidth?: string
        children: Snippet
    }

    let {
        gap = "gap-3 md:gap-4 lg:gap-8",
        scrollAmount = 450,
        containerClass = "",
        wrapperClass = "",
        fullWidth = false,
        maxWidth = "",
        children,
    }: CarouselProps = $props()

    let scrollContainer: HTMLElement
    let canScrollLeft = $state(false)
    let canScrollRight = $state(false)

    function checkScroll() {
        if (scrollContainer) {
            canScrollLeft = scrollContainer.scrollLeft > 50
            canScrollRight = scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 1
        }
    }

    function scrollLeft() {
        if (scrollContainer) {
            scrollContainer.scrollBy({
                left: -scrollAmount,
                behavior: "smooth",
            })
        }
    }

    function scrollRight() {
        if (scrollContainer) {
            scrollContainer.scrollBy({
                left: scrollAmount,
                behavior: "smooth",
            })
        }
    }

    onMount(() => {
        checkScroll()
    })
</script>

<div class="relative {wrapperClass}">
    <!-- Scroll Container -->
    <div
        class="flex {gap} overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-4 scroll-smooth {fullWidth
            ? 'px-4 md:px-8 lg:px-12'
            : ''} {containerClass}"
        bind:this={scrollContainer}
        onscroll={checkScroll}
        onload={checkScroll}
    >
        {@render children()}
    </div>
</div>

<!-- Navigation Arrows -->
{#if canScrollLeft || canScrollRight}
    <div class="{maxWidth ? `max-w-[${maxWidth}]` : ''} mx-auto px-4 md:px-8 lg:px-12">
        <div class="flex gap-0 mt-6">
            <button
                onclick={scrollLeft}
                disabled={!canScrollLeft}
                class="w-12 h-10 flex items-center justify-center transition-opacity {canScrollLeft
                    ? 'cursor-pointer hover:opacity-70'
                    : 'cursor-default opacity-30'}"
                aria-label="Scroll left"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>
            <button
                onclick={scrollRight}
                disabled={!canScrollRight}
                class="w-12 h-10 flex items-center justify-center transition-opacity {canScrollRight
                    ? 'cursor-pointer hover:opacity-70'
                    : 'cursor-default opacity-30'}"
                aria-label="Scroll right"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>
        </div>
    </div>
{/if}

<style>
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
</style>
