@props(['variant' => '', 'icon' => '', 'link' => ''])
@php
    $variants = [
        'neutral' => 'bg-primary-600 text-white',
        'red' => 'bg-red-500 text-white',
        'ghost' => 'bg-gray-200 text-gray-900'
    ];

    $variantClass = $variants[$variant] ?? '';
@endphp
@if($link !== '')
    <a {{$attributes->merge(['class' => "block  active:scale-90 transition-all duration-200 px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
        <div class="flex justify-center items-center space-x-2">
            @if($icon !=='')
                @svg("heroicon-o-$icon", 'w-5 h-5')
            @endif
            <p>{{$slot}}</p>
        </div>
    </a>
@else
    <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80  active:scale-90 transition-all duration-200 $variantClass", 'type'=>'submit'])}}>
        <div class="flex justify-center items-center space-x-2">
            @if($icon !=='')
                @svg("heroicon-o-$icon", 'w-5 h-5')
            @endif

            <p>{{$slot}}</p>
        </div>
    </button>
@endif