@props([
    'icon' => '',
    'title' => '',
    'description' => '',
    'value' => '',
    'model' => 'selected',
    'variant' => 'default',
    'disabled' => false,
    'compact' => false
])

@php
    $id = uniqid('action_card_');
    $iconClasses = match($icon) {
        'check-c' => 'text-success bg-success-subtle',
        'cross-c' => 'text-danger bg-danger-subtle',
        default => 'text-primary bg-primary-subtle'
    };
@endphp

<div class="action-card-wrapper">
    <input 
        type="radio" 
        id="{{ $id }}" 
        name="{{ $model }}" 
        value="{{ $value }}"
        x-model="{{ $model }}"
        class="action-card-input"
        {{ $disabled ? 'disabled' : '' }}
    >
    <label for="{{ $id }}" class="action-card{{ $compact ? ' action-card-compact' : '' }} {{ $disabled ? 'action-card-disabled' : '' }}">
        <div class="action-card-content">
            @if($icon)
                <div class="action-card-icon {{ $iconClasses }}">
                    <x-ui.nicon :name="$icon" />
                </div>
            @endif
            
            @if($title)
                <h6 class="action-card-title">{{ $title }}</h6>
            @endif
            
            @if($description)
                <p class="action-card-description">{{ $description }}</p>
            @endif
        </div>
        
        <div class="action-card-check">
            <div class="check-indicator">
                <x-ui.nicon name="check" />
            </div>
        </div>
    </label>
</div>