@props([
    'count' => 0,
])

<div
    x-data="{ open: false }"
    @click.outside="open = false"
    {{ $attributes->merge(['class' => 'relative']) }}
>
    <button
        type="button"
        class="relative inline-flex items-center justify-center rounded-[var(--radius-md)] p-2 text-[var(--color-text)] hover:bg-[var(--color-bg)]"
        @click="open = !open"
        :aria-expanded="open"
        aria-label="Notifications"
    >
        <x-ui.icon name="bell" class="h-5 w-5" />

        @if ((int) $count > 0)
            <span class="absolute -right-0.5 -top-0.5 inline-flex min-w-[1.125rem] items-center justify-center rounded-full bg-[var(--color-danger)] px-1 text-[10px] font-semibold leading-4 text-white">
                {{ (int) $count > 99 ? '99+' : (int) $count }}
            </span>
        @endif
    </button>

    <div
        x-show="open"
        x-cloak
        x-transition
        class="absolute right-0 z-40 mt-2 w-72 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] py-1 shadow-[var(--shadow-md)]"
        role="menu"
    >
        {{ $slot }}
    </div>
</div>