@props([ 'link' => '', 'active' => false, 'tooltip' => ''])
@php
    if (!$active){
        $active =  url()->current() === $link;
    }
@endphp
@aware(['activeClass' => 'bg-gray-100 text-gray-900'])
<div class="relative group/item w-full hover:z-10">
    @if(filled($link))
        <a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center pl-3 py-3 rounded-xl hover:bg-gray-100 border border-transparent ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => $active])}} >
            {{$slot}}
        </a>
    @else
        <button {{$attributes->class(["flex space-x-3 items-center pl-3 py-3 rounded-xl hover:bg-gray-100 border border-transparent ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => $active])}} >
            {{$slot}}
        </button>
    @endif
    @if($tooltip !== '')
        <span
            class="absolute z-10 top-[30%] hidden group-[.w-20]:group-hover/item:block left-[110%]  py-1 px-2 rounded-lg bg-gray-900 text-xs whitespace-nowrap text-white">
                {{$tooltip}}
            </span>
    @endif
</div>