@props(['active'])

@php
$classes = ($active ?? false)
            ? 'flex space-x-2 px-4 py-2 mt-2 text-1xl font-bold text-gray-900 bg-white right-1/3 rounded-l-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 focus:text-gray-900 focus:outline-none focus:shadow-outline focus:outline-none w-full text-left pointer-events-auto cursor-pointer'
            : 'flex space-x-2 px-4 py-2 mt-2 text-1xl font-bold text-white bg-transparent rounded-l-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 focus:text-gray-900 focus:outline-none focus:shadow-outline focus:outline-none w-full text-left pointer-events-auto cursor-pointer';
@endphp

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