@props(['selecionado' => false, 'nome' => '', 'href' => null, 'ref' => 'selecionado', 'class' => ''])
@php
    $tag = $href ? 'a' : 'button';
@endphp
<{{$tag}}
    {{ $attributes->merge(['href' => $href, 'data-selecionado' => $selecionado ? 'true' : 'false'])->class([
        'rounded-full font-medium shrink-0 text-xs py-3 px-3 cursor-pointer sm:text-sm border sm:px-5',
        'bg-midnightblue-100 text-white border-transparent' => $selecionado,
        'bg-white border-midnightblue-100 text-midnightblue-100 hover:bg-midnightblue-100/10' => !$selecionado,
        $class
    ]) }}
    :class="{
        'bg-midnightblue-100 text-white border-transparent': {{ $ref }} === '{{ $nome }}',
        'bg-white border-midnightblue-100 text-midnightblue-100 hover:bg-midnightblue-100/10': {{ $ref }} !== '{{ $nome }}'
    }">
    {{ $slot }}
</{{$tag}}>