<script lang="ts">
    interface SliderProps {
        label: string;
        value?: number;
        min?: number;
        max?: number;
        step?: number;
        onchange?: (value: number) => void;
    }

    let {
        label,
        value = $bindable(100),
        min = 0,
        max = 100,
        step = 5,
        onchange,
    }: SliderProps = $props();

    function handleInput(e: Event) {
        const target = e.target as HTMLInputElement;
        value = Number(target.value);
        onchange?.(value);
    }
</script>

<div class="flex items-center justify-between w-full gap-4">
    <span class="text-2xl text-kv-white uppercase font-kv-body kv-shadow-text">
        {label}
    </span>

    <div class="flex items-center gap-4">
        <span
            class="text-2xl text-kv-yellow uppercase font-kv-body min-w-[60px] text-right kv-shadow-text"
        >
            {value}%
        </span>

        <div class="relative w-[150px] h-[24px] flex items-center">
            <input
                type="range"
                {min}
                {max}
                {step}
                {value}
                oninput={handleInput}
                class="slider-input w-full"
            />
        </div>
    </div>
</div>

<style>
    .slider-input {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
        height: 4px;
    }

    .slider-input::-webkit-slider-runnable-track {
        background: var(--kv-yellow);
        height: 4px;
        border-radius: 2px;
    }

    .slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        border: 3px solid var(--kv-yellow);
        margin-top: -8px;
        cursor: pointer;
    }

    .slider-input::-moz-range-track {
        background: var(--kv-yellow);
        height: 4px;
        border-radius: 2px;
    }

    .slider-input::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        border: 3px solid var(--kv-yellow);
        cursor: pointer;
    }
</style>
