@props([
    'credit' => [],
    'enabledModel' => null,
    'lotesModel' => null,
    'housesModel' => null,
])

<div class="p-4 rounded-xl border-2 bg-primary/5 dark:bg-primary/10 flex flex-col gap-3">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <span class="material-symbols-outlined text-primary">{{ $credit['icon'] }}</span>
            <span class="font-semibold text-sm">{{ $credit['name'] }}</span>
        </div>
        <div class="relative inline-flex items-center cursor-pointer" x-data="{ v: @entangle($enabledModel).live }" @click="v = !v">
            <input class="sr-only peer" type="checkbox" x-model="v" />
            <div
                class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary">
            </div>
        </div>
    </div>
    @if (!empty($credit['tag']))
        <div class="flex gap-2">
            <span
                class="px-2 py-0.5 bg-{{ $credit['tag']['color'] }}-100 text-{{ $credit['tag']['color'] }}-700 text-[10px] font-bold rounded uppercase">{{ $credit['tag']['name'] }}</span>
        </div>
    @endif

    <div class="space-y-2 mt-2">
        @if ($credit['available_lotes'])
            <div class="flex items-center justify-between text-xs">
                <span>Disponible para lotes</span>
                <input checked="" class="rounded text-primary size-4" type="checkbox" />
            </div>
        @endif
        @if ($credit['available_houses'])
            <div class="flex items-center justify-between text-xs">
                <span>Disponible para casas</span>
                <input class="rounded text-primary size-4" type="checkbox" />
            </div>
        @endif


    </div>
</div>