@props([
    'title',
    'description' => null,
    'icon'        => 'heroicon-o-squares-2x2',
    'url'         => '#',
    'count'       => null,
    'color'       => 'blue',
])

@php
$headerClass = match ($color) {
    'blue', 'primary'  => 'bg-blue-600',
    'green', 'success' => 'bg-green-600',
    'red', 'danger'    => 'bg-red-600',
    'yellow', 'warning'=> 'bg-amber-500',
    'purple'           => 'bg-purple-600',
    'orange'           => 'bg-orange-500',
    'teal'             => 'bg-teal-600',
    'slate'            => 'bg-slate-600',
    default            => 'bg-blue-600',
};
$dir = app()->getLocale() === 'fa' ? 'rtl' : 'ltr';
@endphp

<a href="{{ $url }}" wire:navigate class="group block h-full">
    <div class="nav-card group-hover:shadow-md">

        <div class="flex items-center gap-4 px-6 py-5 {{ $headerClass }}" dir="{{ $dir }}">
            <div class="shrink-0 rounded-lg bg-white/25 p-2">
                <x-dynamic-component
                    :component="$icon"
                    class="h-5 w-5 text-white"
                    style="width:1.25rem;height:1.25rem;display:block;color:white"
                />
            </div>

            <div class="min-w-0 flex-1">
                <p class="truncate text-xl font-bold text-white leading-snug">
                    {{ $title }}
                </p>
                @if ($count !== null)
                    <p class="mt-0.5 text-sm text-white/75">{{ number_format($count) }}</p>
                @endif
            </div>
        </div>

        <div class="flex-1 px-6 py-5" dir="{{ $dir }}">
            @if ($description)
                <p class="nav-card-body-text line-clamp-3">
                    {{ $description }}
                </p>
            @endif
        </div>

    </div>
</a>