@props(['id' => rand(9, 99999), 'disabled' => false, 'label' => null])
<div class="flex items-center">
    <div class="relative flex items-center justify-center">
        <input type="checkbox" id="{{ $id }}" value="{{ $attributes->get('value') }}"
            {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge([
                'class' => '
                            peer
                            appearance-none
                            w-5 h-5
                            border border-gray-300
                            dark:border-gray-700
                            rounded-md
                            checked:bg-blue-600 checked:border-blue-600
                            transition-all duration-150
                            cursor-pointer
                            disabled:opacity-50 disabled:cursor-not-allowed
                            focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-300
                        ',
            ]) !!} />

        <svg class="absolute w-3.5 h-3.5 text-white opacity-0
               peer-checked:opacity-100
               transition-opacity duration-150
               pointer-events-none"
            stroke="currentColor" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="1.94437"
                stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </div>
    @if ($label)
        <label class="block ms-2 text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
        </label>
    @endif
</div>