@props([
    'name' => null,
    'label' => null,
    'min' => 0,
    'max' => 100,
    'step' => 1,
    'value' => 0,
    'showValue' => true,
])

@php
$fieldError = $name ? $errors->first($name) : null;
$rangeClasses = 'h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-200 accent-primary-500 dark:bg-slate-700';

if ($fieldError) {
    $rangeClasses .= ' ring-2 ring-rose-500/60';
}
@endphp

<div x-data="{ current: Number(@js($value)) }" class="space-y-3">
    <div class="flex items-center justify-between">
        @if($label)
            <label for="{{ $name }}" class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ $label }}</label>
        @endif

        @if($showValue)
            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200" x-text="current"></span>
        @endif
    </div>

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="range"
        min="{{ $min }}"
        max="{{ $max }}"
        step="{{ $step }}"
        x-model="current"
        {{ $attributes->merge(['class' => $rangeClasses]) }}
    >

    @if($fieldError)
        <p class="text-sm text-rose-600 dark:text-rose-400">{{ $fieldError }}</p>
    @endif
</div>