@props([
    'active' => false, // boolean whether the tab is active
    'label' => null,   // tab label
    'icon' => null,    // icon name only
    'color' => '',     // optional icon color
    'remote' => null   // flag for whether calendar is remote
])

@php
    $isActive = (bool) $active;

    $classes = trim(collect([
        'pagelink',
        $isActive ? 'is-active' : null,
    ])->filter()->implode(' '));

    $iconComponent = null;
    if ($icon) {
        $iconComponent = $isActive
            ? 'icon-solid.'.$icon
            : 'icon-'.$icon;
    }
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
    @if ($iconComponent)
        <x-dynamic-component :component="$iconComponent" width="20" :color="$color" />
    @endif

    @if (!is_null($label))
        <span>
            {{ $label }}
            @if ($remote)
                @if ($isActive)
                    <x-icon-solid.share width="12" />
                @else
                    <x-icon-share width="12" />
                @endif
            @endif
        </span>
    @else
        {{ $slot }}
    @endif
</a>
