@props(['active'])

@php
// Algoritmo que calcula dinamicamente as classes CSS com base no estado de ativação da rota
$classes = ($active ?? false)
            // ESTADO ATIVO: Texto branco puro e linha inferior em Laranja Rally (#ff451a)
            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-[#ff451a] text-sm font-medium leading-5 text-white focus:outline-none focus:border-[#ff451a] transition duration-150 ease-in-out'
            // ESTADO INATIVO: Texto cinza muted que transita para branco puro ao passar o rato (hover)
            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-[#8b8b93] hover:text-white hover:border-[#333339] focus:outline-none focus:text-white focus:border-[#333339] transition duration-150 ease-in-out';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</a>