@props(['icon' => '', 'active'])

@php
$classes = "flex flex-col items-center font-bold text-white border-x-4 border-transparent py-5 2xl:flex-row 2xl:gap-6 2xl:p-4 2xl:items-center hover:bg-gray-800/80 cursor-pointer";
$classes_active = "border-s-amber-500 border-e-transparent bg-gray-800/80";
$classes .= $active ? " ".$classes_active : "";

$iconHtml = match($icon)
{
    "fa-home" => '<i class="fa-solid fa-house"></i>',
    "fa-wallet" => '<i class="fa-solid fa-wallet"></i>',
    "fa-lock" => '<i class="fa-solid fa-lock"></i>',
    "fa-industry" => '<i class="fa-solid fa-industry"></i>',
    "fa-briefcase" => '<i class="fa-solid fa-briefcase"></i>',
    "fa-receipt" => '<i class="fa-solid fa-receipt"></i>',
    default => '<i class="fa-solid fa-caret-right"></i>'
}
@endphp

<a 
    {{ $attributes->merge(['class' => $classes]) }}
    wire:navigate
>
    
    <span class="hidden text-sm 2xl:inline-flex">{{ $slot }}</span>
</a>