@props(['active'])

@php
$classes = ($active ?? false)
            ? 'group flex text-sm focus:outline-none transition duration-150 ease-in-out gap-x-2 px-2 py-2 rounded-md font-semibold text-white bg-primary focus:bg-primary items-center'
            : 'group flex text-sm font-medium focus:outline-none transition duration-150 ease-in-out gap-x-2 px-2 items-center hover:text-secondary';
@endphp

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