@props([
    'name',
    'id' => null,
    'label' => null,
    'divClass' => '',
])
<div class="flex items-center {{ $divClass ?? '' }}">
    <div class="relative">
        <input type="checkbox" name="{{ $name }}" id="{{ $id ?? $name }}"
            {{ $attributes->except(['label', 'name', 'id', 'class', 'divClass', 'required']) }}
            class="peer form-checkbox size-5 text-primary rounded border-2 border-neutral/70 bg-background-secondary/50 
                   focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none
                   checked:bg-primary checked:border-primary checked:shadow-[0_0_12px_-2px_hsl(var(--color-primary)/0.55)]
                   hover:border-primary/60 transition-all duration-200 cursor-pointer
                   appearance-none" />
        <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-3 text-white pointer-events-none opacity-0 scale-50 peer-checked:opacity-100 peer-checked:scale-100 transition-all duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
        </svg>
    </div>
    <label class="ml-2 text-sm text-color-base cursor-pointer select-none" for="{{ $id ?? $name }}">
        @if(isset($label))
            {{ $label }}
        @else
            {{ $slot }}
        @endif
    </label>

    @error($name)
        <p class="text-error text-xs ml-2">{{ $message }}</p>
    @enderror
</div>