@props([
    'title' => null,
    'value' => null,
    'icon' => null,
    'color' => null,
    'href' => null,
    'label' => null
])

@php
    $iconContainerClasses = \Illuminate\Support\Arr::toCssClasses([
        'p-1.5 rounded-full flex items-center justify-center',
        match ($color) {
            'primary' => 'bg-primary-600/50 text-primary-600',
            'secondary' => 'bg-secondary-600/50 text-secondary-600',
            'sky' => 'bg-sky-600/50 text-sky-600',
            'warning' => 'bg-warning-600/50 text-warning-600',
            default => null,
        },
]);
@endphp

<div class="relative w-full flex flex-col bg-white rounded-lg py-4 px-3 gap-y-5 shadow-md">
    <div class="flex items-start justify-between">
        <p class="text-lg font-normal xl:text-base">{{ $title }}</p>
        <div class="{{ $iconContainerClasses }}">
            <x-filament::icon
                icon="{{ $icon }}"
                class="h-5 w-5"
            />
        </div>
    </div>
    <div class="flex items-end justify-between">
        <p class="text-3xl font-bold">{{ $value }}</p>
        <div class="">
            @if($href)
                <x-filament::link
                    icon="heroicon-m-chevron-right"
                    iconPosition="after"
                    color="gray"
                    class="flex items-center"
                >
                    {{ __('see_more') }}
                </x-filament::link>
            @else
                {{ $label }}
            @endif

        </div>
    </div>
    @if($href)
        <a href="{{ $href }}" class="absolute inset-0" wire:navigate></a>
    @endif
</div>