@props([
    'streak' => 0,
    'points' => 0,
])

<header class="h-14 px-6 flex items-center gap-4 border-b border-line bg-bg-elev sticky top-0 z-10 backdrop-blur-sm">
    <x-layout.search-input />

    <div class="flex items-center gap-2.5 ml-auto">
        <x-layout.gamification-chip icon="fire" :value="$streak . ' Tage'" />
        <x-layout.gamification-chip icon="star" :value="number_format((int) $points, 0, ',', '.')" />

        <button
            type="button"
            aria-label="Mitteilungen"
            class="relative w-9 h-9 grid place-items-center rounded-lg border border-line bg-bg-soft hover:bg-bg-tint hover:border-line-strong transition-all duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg-elev"
        >
            <x-heroicon-o-bell class="w-4 h-4 text-ink-2" />
            <span class="absolute top-2 right-2 w-1.5 h-1.5 rounded-full bg-danger ring-2 ring-bg-soft"></span>
        </button>
    </div>
</header>