@props([
    'label' => null,
    'name' => null,
    'checked' => false,
    'disabled' => false,
])

@php
    $baseCursor = $disabled ? 'cursor-not-allowed' : 'cursor-pointer';
    $classes = "w-4 h-4 text-indigo-600 bg-zinc-100 border-zinc-300 rounded focus:ring-indigo-500 focus:ring-2 dark:bg-gray-900 dark:border-neutral-700 dark:focus:ring-indigo-600 dark:ring-offset-zinc-800 {$baseCursor}";
    $labelClasses = "text-sm font-medium text-zinc-900 dark:text-zinc-300 {$baseCursor}";
    if ($disabled) {
        $labelClasses .= ' opacity-60';
    }
@endphp

<div class="flex items-center gap-2">
    <input
        type="checkbox"
        {{ $attributes->merge(['class' => $classes]) }}
        @if($name) name="{{ $name }}" @endif
        @if($checked && !$disabled) checked @endif
        @if($disabled) disabled @endif
    />
    @if($label)
        <label {{ $attributes->only(['wire:model', 'id'])->merge(['class' => $labelClasses]) }}>
            {{ $label }}
        </label>
    @endif
</div>