{{--
    User Header Component
    This mirrors the admin topbar style but removes the sidebar toggle.
--}}
@props(['title' => __('pages/dashboard.welcome', ['name' => ''])])

<header class="topbar mt-auto px-6 py-4 border-t border-surface-200 dark:border-surface-700
               text-xs text-surface-400 dark:text-surface-500 flex flex-col sm:flex-row
               items-center justify-between gap-2">
    <div class="flex-1">
        <div class="flex items-center gap-3">
            <div class="text-base font-semibold text-surface-900 dark:text-surface-100">
                {{ $title }}
            </div>
            <span class="hidden sm:inline text-sm text-surface-500 dark:text-surface-400">{{ __('pages/dashboard.page_title') }}</span>
        </div>
    </div>

    <div class="ms-auto flex items-center gap-2">
        <x-common.lang-toggle />
        <x-common.theme-toggle />

        <x-common.auth.user-dropdown
            guard="user"
            :menuItems="config('user-nav.dropdown-items')"
            :logoutRoute="route('user.logout')"
        />
    </div>
</header>