@props([
    'label'    => null,
    'required' => false,
    'disabled' => false,
    'checked'  => false,
    'value'    => '1',
])

<div class="flex items-center gap-3 ">
    <input
        type="checkbox"
        value="{{ $value }}"
        @checked($checked)
        @disabled($disabled)
        @required($required)
        {{ $attributes->merge(['class' => 'checkbox appearance-none w-[16px] h-[16px] shrink-0 relative border border-black bg-transparent cursor-pointer']) }}
    >

    @if ($label || $slot->isNotEmpty())
        @php $labelContent = $label ?: $slot; @endphp
        <label
            @if($attributes->get('id')) for="{{ $attributes->get('id') }}" @endif
            class="flex items-center justify-center cursor-pointer {{ $disabled ? 'opacity-50' : '' }}"
        >{{ $labelContent }}</label>
    @endif
</div>