@props(['priority'])

@php
    $config = match(strtolower($priority)) {
        'highest' => ['color' => 'text-red-600', 'bg' => 'bg-red-50', 'icon' => 'M5 11l7-7 7 7M5 19l7-7 7 7'],
        'high' => ['color' => 'text-orange-600', 'bg' => 'bg-orange-50', 'icon' => 'M5 15l7-7 7 7'],
        'medium' => ['color' => 'text-blue-600', 'bg' => 'bg-blue-50', 'icon' => 'M5 12h14'],
        'low' => ['color' => 'text-green-600', 'bg' => 'bg-green-50', 'icon' => 'M19 9l-7 7-7-7'],
        'lowest' => ['color' => 'text-slate-600', 'bg' => 'bg-slate-50', 'icon' => 'M19 5l-7 7-7-7M19 13l-7 7-7-7'],
        default => ['color' => 'text-slate-400', 'bg' => 'bg-slate-50', 'icon' => 'M5 12h14'],
    };
@endphp

<div class="inline-flex items-center justify-center p-1 rounded {{ $config['bg'] }} {{ $config['color'] }}" title="Priority: {{ ucfirst($priority) }}">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $config['icon'] }}" />
    </svg>
</div>