@props([
    'id' => uniqid('checkbox-'),
    'name' => '',
    'value' => '',
    'label' => '',
    'checked' => false,
    'disabled' => false,
    'classCheckbox' => ''
])

<label for="{{ $id }}" class="flex items-center space-x-3 cursor-pointer select-none">
    <input
        type="checkbox"
        id="{{ $id }}"
        name="{{ $name }}"
        value="{{ $value }}"
        @checked($checked)
        @disabled($disabled)
        {{ $attributes->merge(['class' => "peer hidden $classCheckbox"]) }}
    />

    {{-- Estilo del checkbox --}}
    <span class="w-6 h-6 flex items-center justify-center rounded-md border border-gray-400
                 peer-checked:bg-primary100 peer-checked:border-primary100
                 peer-disabled:bg-gray-200 peer-disabled:border-optional
                 transition-colors duration-200">
        <svg class="w-3 h-3 text-white hidden peer-checked:block" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path d="M5 13l4 4L19 7"/>
        </svg>
    </span>

    {{-- Texto del label --}}
    @if($label)
        <span class="text-black peer-disabled:text-gray-400 parrafo">{{ $label }}</span>
    @endif
</label>