@props([
    'type' => 'danger',
    'label' => null,
    'description' => null,
    'iconSize' => '24'
])

@php
    $color = [
        'danger' => 'text-red-600',
        'info' => 'text-primary-600',
        'success' => 'text-green-600',
    ][$type];
@endphp

<div {{ $attributes->class('flex gap-2') }}>

    @switch($type)
        @case('danger')
            <svg style="min-width: {{$iconSize}}px" width="{{$iconSize}}" height="{{$iconSize}}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.667969" width="18.6875" height="18.6875" rx="9.34375" fill="#FDE8E8"/>
                <path d="M10.0391 8.19488V10.0117M10.0391 11.8286H10.0436M14.127 10.0117C14.127 10.5485 14.0212 11.0801 13.8158 11.5761C13.6103 12.0721 13.3092 12.5227 12.9296 12.9023C12.55 13.2819 12.0994 13.583 11.6034 13.7884C11.1075 13.9939 10.5759 14.0996 10.0391 14.0996C9.50223 14.0996 8.97066 13.9939 8.47469 13.7884C7.97873 13.583 7.52808 13.2819 7.14849 12.9023C6.76889 12.5227 6.46778 12.0721 6.26234 11.5761C6.05691 11.0801 5.95117 10.5485 5.95117 10.0117C5.95117 8.92754 6.38186 7.88777 7.14849 7.12114C7.91512 6.35452 8.95489 5.92383 10.0391 5.92383C11.1232 5.92383 12.163 6.35452 12.9296 7.12114C13.6963 7.88777 14.127 8.92754 14.127 10.0117Z" stroke="#C81E1E" stroke-width="0.778646" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        @break

        @case('info')
            <svg style="min-width: {{$iconSize}}px" width="{{$iconSize}}" height="{{$iconSize}}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.667969" width="18.6875" height="18.6875" rx="9.34375" fill="#E0F2FE"/>
                <path d="M10.4933 11.8284H10.0391V10.0116H9.58485M10.0391 8.19476H10.0436M14.127 10.0116C14.127 10.5484 14.0212 11.08 13.8158 11.576C13.6103 12.0719 13.3092 12.5226 12.9296 12.9022C12.55 13.2818 12.0994 13.5829 11.6034 13.7883C11.1075 13.9938 10.5759 14.0995 10.0391 14.0995C9.50223 14.0995 8.97066 13.9938 8.47469 13.7883C7.97873 13.5829 7.52808 13.2818 7.14849 12.9022C6.76889 12.5226 6.46778 12.0719 6.26234 11.576C6.05691 11.08 5.95117 10.5484 5.95117 10.0116C5.95117 8.92742 6.38186 7.88765 7.14849 7.12102C7.91512 6.35439 8.95489 5.92371 10.0391 5.92371C11.1232 5.92371 12.163 6.35439 12.9296 7.12102C13.6963 7.88765 14.127 8.92742 14.127 10.0116Z" stroke="#0284C7" stroke-width="0.778646" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        @break

        @case('success')
            <svg  style="min-width: {{$iconSize}}px" width="{{$iconSize}}" height="{{$iconSize}}" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.910156" width="64" height="64" rx="32" fill="#DEF7EC"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M49.007 20.7027C49.4569 21.1528 49.7096 21.7631 49.7096 22.3995C49.7096 23.0359 49.4569 23.6462 49.007 24.0963L29.807 43.2963C29.3569 43.7462 28.7466 43.999 28.1102 43.999C27.4738 43.999 26.8634 43.7462 26.4134 43.2963L16.8134 33.6963C16.3762 33.2436 16.1343 32.6374 16.1397 32.0081C16.1452 31.3789 16.3976 30.7769 16.8426 30.3319C17.2876 29.8869 17.8895 29.6345 18.5188 29.6291C19.1481 29.6236 19.7543 29.8655 20.207 30.3027L28.1102 38.2059L45.6134 20.7027C46.0634 20.2528 46.6738 20 47.3102 20C47.9466 20 48.5569 20.2528 49.007 20.7027Z" fill="#0E9F6E"/>
            </svg>
        @break
    @endswitch

    <div>
        @empty(!$label)
            <span class="leading-tight text-base font-bold {{ $color }}">
                {{ $label }}@if($description):@endif
            </span>
        @endisset

        <span class="font-normal {{ $color }}">
            {{ $description }}
        </span>
    </div>

</div>