@props([
    'title',
    'description' => null,
    'metrics' => [],
    'color' => 'gray',
    'url' => null,
])

@php
    $accentClasses = match ($color) {
        'primary' => 'border-primary-200 bg-primary-50/60 dark:border-primary-500/30 dark:bg-primary-500/10',
        'success' => 'border-success-200 bg-success-50/60 dark:border-success-500/30 dark:bg-success-500/10',
        'warning' => 'border-warning-200 bg-warning-50/60 dark:border-warning-500/30 dark:bg-warning-500/10',
        'danger' => 'border-danger-200 bg-danger-50/60 dark:border-danger-500/30 dark:bg-danger-500/10',
        'info' => 'border-info-200 bg-info-50/60 dark:border-info-500/30 dark:bg-info-500/10',
        default => 'border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-white/5',
    };

    $dotClasses = match ($color) {
        'primary' => 'bg-primary-500',
        'success' => 'bg-success-500',
        'warning' => 'bg-warning-500',
        'danger' => 'bg-danger-500',
        'info' => 'bg-info-500',
        default => 'bg-gray-400',
    };

    $valueClasses = match ($color) {
        'primary' => 'text-primary-700 dark:text-primary-300',
        'success' => 'text-success-700 dark:text-success-300',
        'warning' => 'text-warning-700 dark:text-warning-300',
        'danger' => 'text-danger-700 dark:text-danger-300',
        'info' => 'text-info-700 dark:text-info-300',
        default => 'text-gray-950 dark:text-white',
    };
@endphp

<x-filament::section>
    <div class="flex flex-col gap-3">
        <div class="space-y-1">
            <div class="flex items-center gap-2">
                <span class="h-2.5 w-2.5 flex-none rounded-full {{ $dotClasses }}"></span>

                <h4 class="text-sm font-semibold text-gray-950 dark:text-white">
                    {{ $title }}
                </h4>
            </div>

            @if (filled($description))
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $description }}
                </p>
            @endif
        </div>

        <div
            class="flex min-h-36 flex-col justify-center gap-3 rounded-xl border px-4 py-4 {{ $accentClasses }}"
            aria-label="{{ $title }}"
        >
            @forelse ($metrics as $metric)
                <div class="flex items-start justify-between gap-3">
                    <span class="text-xs leading-5 text-gray-600 dark:text-gray-300">
                        {{ $metric['label'] }}
                    </span>

                    <span class="shrink-0 text-right text-sm font-semibold tabular-nums {{ $valueClasses }}">
                        {{ $metric['value'] }}
                    </span>
                </div>
            @empty
                <p class="text-center text-sm text-gray-500 dark:text-gray-400">
                    {{ __('dberp.widgets.workbench_shared.default_empty') }}
                </p>
            @endforelse
        </div>

        @if (filled($url))
            <a
                href="{{ $url }}"
                class="inline-flex items-center text-xs font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
            >
                {{ __('dberp.widgets.business_overview_workbench.view_details') }}
            </a>
        @endif
    </div>
</x-filament::section>
