@props(['variant' => '', 'link' => '', 'external' => false, 'tooltip' => ''])
@php
    $variants = [
        'neutral' => 'bg-primary-600 text-white',
        'ghost' => 'bg-gray-200 text-gray-700 text-sm',
        'red' => 'bg-red-100 text-red-500 text-sm',
        'green' => 'bg-green-100 text-green-700 text-sm',
    ];

    $variantClass = $variants[$variant] ?? '';
@endphp
<div class="relative group w-fit hover:z-1">
    @if($link !== '')
        <a href="{{$link}}"
           @if($external) target="_blank" @endif {{$attributes->merge(['class' => "inline-flex px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 hover: active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
            {{$slot}}
        </a>
    @else
        <button {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80  hover:scale-110 active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
            <p>{{$slot}}</p>

        </button>
    @endif
    @if($tooltip !== '')
        <span
            class="absolute top-full mt-2 hidden group-hover:block right-0  py-1 px-2 rounded-lg bg-gray-900 text-xs whitespace-nowrap text-white">
                {{$tooltip}}
            </span>
    @endif
</div>