@props([
    'label',
    'clearUrl',
    'description' => null,
])

@if (filled($label) && filled($clearUrl))
    <div
        data-testid="workspace-hub-environment-filter-chip"
        class="flex flex-wrap items-center gap-2 rounded-lg border border-primary-200 bg-primary-50 px-3 py-2 text-sm text-primary-900 dark:border-primary-700/60 dark:bg-primary-950/30 dark:text-primary-100"
    >
        <span class="font-medium">Environment filter:</span>
        <span>{{ $label }}</span>

        @if (filled($description))
            <span class="text-primary-700 dark:text-primary-300">{{ $description }}</span>
        @endif

        <a
            href="{{ $clearUrl }}"
            class="ms-auto text-sm font-medium text-primary-700 underline-offset-4 hover:underline dark:text-primary-300"
            data-testid="workspace-hub-environment-filter-clear"
        >
            Clear filter
        </a>
    </div>
@endif
