Choice Card code

@props([
    'name',
    'value' => '1',
    'type' => 'radio',
    'label' => null,
    'description' => null,
    'icon' => null,
    'checked' => false,
    'disabled' => false,
])

@php
    /*
    | Radio/checkbox card for plans, modes and settings choices. Uses native
    | inputs with Tailwind's has-checked state so forms stay plain HTML.
    |
    | Usage:
    |   <x-ui.choice-card name="plan" value="pro" label="Pro" icon="rocket" />
    */
@endphp

<label
    {{ $attributes->merge([
        'class' => 'group relative flex cursor-pointer items-start gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-gray-300 hover:bg-gray-50/60 has-checked:border-brand-500 has-checked:bg-brand-50 has-checked:ring-1 has-checked:ring-brand-500 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800/40 dark:has-checked:border-brand-500 dark:has-checked:bg-brand-950/35 '.($disabled ? 'opacity-50 cursor-not-allowed' : ''),
    ]) }}
>
    <input
        type="{{ $type }}"
        name="{{ $name }}"
        value="{{ $value }}"
        @checked($checked)
        @disabled($disabled)
        class="peer sr-only"
    >

    @if ($icon)
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gray-100 text-gray-500 transition group-has-checked:bg-brand-600 group-has-checked:text-white dark:bg-gray-800 dark:text-gray-400">
            <x-ui.icon :name="$icon" size="lg" />
        </span>
    @endif

    <span class="min-w-0 flex-1">
        @if ($label)
            <span class="block text-sm font-semibold text-gray-900 dark:text-white">{{ $label }}</span>
        @endif

        @if ($description)
            <span class="mt-1 block text-sm leading-6 text-gray-500 dark:text-gray-400">{{ $description }}</span>
        @endif

        {{ $slot }}
    </span>

    <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-transparent transition group-has-checked:border-brand-600 group-has-checked:bg-brand-600 group-has-checked:text-white dark:border-gray-700">
        <x-ui.icon name="check" weight="bold" size="xs" />
    </span>
</label>