@props(['label', 'icon', 'type', 'tab'])

@php
$tab = $tab ?? false;
$classes = 'bottom-tab px-4 py-2 flex flex-col space-y-4 items-center text-sm cursor-pointer transition delay-50 hover:text-blue-500';
$type = $type ?? 'button';
$tag = $type == 'link' ? 'a' : 'button';
$label = $label ?? 'Tab name';
@endphp

<{{ $tag }} :class="{ 'active': tab === '#{{ $tab }}' }"
    {{ $attributes->merge(['class' => $classes]) }}
    {{ $type == 'link' && (isset($href) && !empty($href)) ? 'href="' . $href . '"' : 'x-on:click.prevent=tab=\'#' . $tab . '\';document.querySelector(\'#editUserButton\').hash=\'' . $tab . '\';location.hash=\'' . $tab . '\'' }}>
    @if (isset($icon))
        <img src="{{ url('images/icons/' . $icon) }}" alt="{{ $label }}" class="bottom-tab_icon w-6 h-6"
            loading="lazy">
    @endif
    <span>{{ $label }}</span>
    </{{ $tag }}>