@props([
    'label' => '',
    'icon' => '',
    'svg' => '',
    'img' => '',
    'height' => '10rem',
    'iconSize' => '4rem',
    'click' => null,
    'enabled' => true,
    'iconClass' => '',
    'selected' => false,
    'borderClass' => 'br-2',
])

@php
    $attributes = $attributes->class([
        'card',
        'd-flex align-items-center justify-center flex-column',
        'card-hover' => $enabled,
        'cursor-pointer' => $enabled,
        'shadow' => $selected,
        $borderClass,
    ])->merge([
        'wire:click' => $enabled ? $click : null,
    ]);
@endphp

<div 
    {{ $attributes }}
    style="height: {{ $height }}; width: {{ $height }}"
>
    @if(! $enabled)
    <small class="mb-1 text-muted">@lang('Coming soon')</small>
    @endif

    @if($icon)
    <div class="nk-iv-scheme-icon is-running mb-2 me-0 {{  $iconClass }}" style="height: {{ $iconSize }}; width: {{ $iconSize }}">
        <x-ui.nicon :name="$icon"/>
    </div>
    @endif
    @if($svg)
    <div class="nk-iv-scheme-icon mb-2 me-0 p-2" style="height: {{ $iconSize }}; width: {{ $iconSize }}">
        @svg($svg)
    </div>
    @endif
    @if($img)
    <div>
        <img src="{{ asset($img) }}" alt="{{ $label }}" class="img-fluid rounded" style="height: {{ $iconSize }};">
        <hr class="mt-1"/>
    </div>
    @endif
    <div class="bold text-center px-1" style="height: 40px; line-height: 18px;">{{ $label }}</div>
</div>