@props([
    'title',
    'value',
    'trend' => null,
    'icon' => null,
    'iconClass' => 'bg-slate-100 text-slate-600 flex items-center justify-center',
    'iconWrapperClass' => 'h-9 w-9 rounded-lg flex items-center justify-center',
    'accent' => null,
])

@php
    $accentMap = [
        'emerald' => 'bg-emerald-500',
        'green' => 'bg-emerald-500',
        'red' => 'bg-rose-500',
        'rose' => 'bg-rose-500',
        'sky' => 'bg-sky-500',
        'blue' => 'bg-sky-500',
        'amber' => 'bg-amber-500',
        'orange' => 'bg-orange-500',
        'violet' => 'bg-violet-500',
        'purple' => 'bg-violet-500',
        'teal' => 'bg-teal-600',
        'slate' => 'bg-slate-400',
    ];

    $leftAccent = $accent ? ($accentMap[$accent] ?? 'bg-slate-400') : 'bg-slate-400';
    if (! $accent) {
        foreach ($accentMap as $key => $bg) {
            if (str_contains((string) $iconClass, $key)) {
                $leftAccent = $bg;
                break;
            }
        }
    }
@endphp

<div {{ $attributes->merge([
    'class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 pl-4 shadow-sm transition duration-200 hover:shadow-md'
]) }}>
    <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl {{ $leftAccent }}" aria-hidden="true"></span>

    <div class="flex items-start justify-between">

        {{-- LEFT SIDE (TEXT) --}}
        <div>
            <p class="text-sm font-medium text-slate-500">
                {{ $title }}
            </p>

            <p class="mt-2 text-sm font-semibold text-slate-900">
                {{ $value }}
            </p>

            @if($trend)
                <p class="mt-1 text-xs {{ str_starts_with($trend, '+') ? 'text-emerald-600' : 'text-slate-500' }}">
                    {{ $trend }}
                </p>
            @endif
        </div>

        {{-- RIGHT SIDE (ICON) --}}
        @if(isset($icon))
            <div class="{{ $iconWrapperClass }} {{ $iconClass }}">
                {{ $icon }}
            </div>
        @endif

    </div>

</div>