@php
    $color = isset($color) ? $color : 'purple-400';
@endphp

<div>
    <div class="widget w-full pl-2 pr-3 py-2 rounded-lg bg-white border-l-4 shadow border-{{ $color }}">
        <div class="flex items-start">
            <div class="icon bg-{{ $color }} text-white rounded mr-2">
                {!! $icon instanceof \Illuminate\View\ComponentSlot ? $icon->toHtml() : e($icon) !!}
            </div>
            <div class="flex flex-col justify-center">
                <div class="text-sm text-gray-900 font-semibold">
                    {!! $value instanceof \Illuminate\View\ComponentSlot ? $value->toHtml() : e($value) !!}
                </div>
                <div class="text-sm text-gray-600">
                    {!! $title instanceof \Illuminate\View\ComponentSlot ? $title->toHtml() : e($title) !!}
                </div>
                @isset($date)
                    <small class="truncate block text-sm text-gray-400">
                        {!! $date instanceof \Illuminate\View\ComponentSlot ? $date->toHtml() : e($date) !!}
                    </small>
                @endisset
            </div>
        </div>
    </div>
</div>