@props([
    'title',
    'value',
    'description' => null,
    'variant' => 'primary',
    'href' => null,
])

@php
    $visual = match ($variant) {
        'success' => [
            'icon' => 'bg-emerald-100 text-emerald-600',
            'detail' => 'text-emerald-700',
            'decoration' => 'bg-emerald-500',
        ],

        'warning' => [
            'icon' => 'bg-amber-100 text-amber-600',
            'detail' => 'text-amber-700',
            'decoration' => 'bg-amber-500',
        ],

        'danger' => [
            'icon' => 'bg-red-100 text-red-600',
            'detail' => 'text-red-700',
            'decoration' => 'bg-red-500',
        ],

        'info' => [
            'icon' => 'bg-sky-100 text-sky-600',
            'detail' => 'text-sky-700',
            'decoration' => 'bg-sky-500',
        ],

        'neutral' => [
            'icon' => 'bg-slate-100 text-slate-600',
            'detail' => 'text-slate-700',
            'decoration' => 'bg-slate-400',
        ],

        default => [
            'icon' => 'bg-indigo-100 text-indigo-600',
            'detail' => 'text-indigo-700',
            'decoration' => 'bg-indigo-500',
        ],
    };

    $tag = $href ? 'a' : 'article';
@endphp

<{{ $tag }}
    @if ($href)
        href="{{ $href }}"
    @endif

    {{
        $attributes->class([
            'group relative overflow-hidden rounded-2xl',
            'border border-slate-200 bg-white p-5 shadow-sm',
            'transition duration-200',
            'hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md' => $href,
        ])
    }}
>
    <div
        class="absolute inset-x-0 top-0 h-1 {{ $visual['decoration'] }}"
        aria-hidden="true"
    ></div>

    <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-500">
                {{ $title }}
            </p>

            <p class="mt-2 break-words text-3xl font-extrabold tracking-tight text-slate-950">
                {{ $value }}
            </p>

            @if ($description)
                <p class="mt-2 text-sm leading-5 text-slate-500">
                    {{ $description }}
                </p>
            @endif
        </div>

        @isset($icon)
            <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl {{ $visual['icon'] }}">
                {{ $icon }}
            </div>
        @endisset
    </div>

    @isset($footer)
        <div class="mt-4 border-t border-slate-100 pt-4">
            {{ $footer }}
        </div>
    @endisset

    @if ($href)
        <div class="mt-4 flex items-center gap-1 text-xs font-bold {{ $visual['detail'] }}">
            Ver detalhes

            <svg
                class="h-3.5 w-3.5 transition-transform group-hover:translate-x-1"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="m9 18 6-6-6-6"
                />
            </svg>
        </div>
    @endif
</{{ $tag }}>