@props(['active', 'route'])

@php
    $classes = ($active ?? false)
                ? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
                : 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
//    $classes = ($active ?? false)
//                ? 'group-hover:underline text-lime-100 text-shadow-sm shadow-lime-950 font-bold'
//                : 'group-hover:underline text-blue-100 text-shadow-sm shadow-blue-950'
@endphp
<form action="{{$route}}"
      method="get">
    <button class="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black"
            type="submit">

        <div class="{{$classes}}">

            <div class="flex flex-row {{isset($active) ? 'font-bold' : ''}}">
                <div class="text-neutral-200 mr-[3px] text-shadow-sm shadow-zinc-950 ">
                    <
                </div>
                <div {{$attributes->merge(['class' => 'text-shadow-sm'])}}>
                    {{ $slot }}
                </div>
                <div class="text-neutral-200 ml-[2px] text-shadow-sm shadow-zinc-950">
                    >
                </div>
            </div>
        </div>
    </button>
</form>