@props([
    'module',
    'enabled' => false,
    'upgradeUrl' => null,
])

@php
    $cardUpgradeUrl = $upgradeUrl ?? (route('dashboard.index') . '#dashboard-modules');
@endphp

<div class="col-md-6 col-xl-4">
    <div @class(['card h-100 border-0 shadow-sm', 'opacity-75' => ! $enabled])>
        <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-start mb-3">
                <span
                    class="avatar avatar-md rounded d-inline-flex align-items-center justify-content-center flex-shrink-0 @if (! $enabled) border border-2 @endif"
                    style="background: {{ $enabled ? config('theme.gradients.primary') : config('theme.gradients.info') }};">
                    @if (! $enabled)
                        <i class="fe fe-lock text-white fs-20"></i>
                    @else
                        <i class="{{ $module->icon }} text-white fs-20"></i>
                    @endif
                </span>
                <div class="ms-3 flex-grow-1 min-w-0">
                    <h5 class="mb-1 fw-semibold" style="color: {{ config('theme.colors.text') }};">{{ $module->name }}</h5>
                    <p class="text-muted small mb-2 mb-md-0">{{ $module->description }}</p>
                    @if ($enabled)
                        <span class="badge bg-success-subtle text-success">{{ __('dashboard.status.enabled') }}</span>
                    @else
                        <span class="badge bg-secondary-subtle text-secondary d-inline-flex align-items-center">
                            <i class="fe fe-lock me-1"></i>{{ __('dashboard.status.locked') }}
                        </span>
                    @endif
                </div>
            </div>

            @if (! $enabled)
                <p class="small text-muted mt-1 mb-2">{{ __('dashboard.locked_banner') }}</p>
            @endif

            <div class="mt-auto pt-2">
                @if ($enabled && $module->href)
                    <x-ui.buttons.primary :href="$module->href" class="w-100" icon="fe fe-arrow-right">
                        {{ __('dashboard.open_module') }}
                    </x-ui.buttons.primary>
                @elseif ($enabled)
                    <x-ui.buttons.secondary type="button" class="w-100" disabled>
                        {{ __('dashboard.unavailable') }}
                    </x-ui.buttons.secondary>
                @else
                    <x-ui.buttons.primary :href="$cardUpgradeUrl" class="w-100" icon="fe fe-zap">
                        {{ __('dashboard.upgrade_plan') }}
                    </x-ui.buttons.primary>
                @endif
            </div>
        </div>
    </div>
</div>
