<template>
    <header
        class="sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur"
    >
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center gap-3">
                <button
                    type="button"
                    class="rounded-lg border border-slate-200 px-2 py-1 text-xs text-slate-500 md:hidden"
                    @click="$emit('toggleSidebar')"
                >
                    Menu
                </button>
                <div>
                    <h1 class="text-lg font-semibold text-slate-900">
                        {{ title }}
                    </h1>
                    <p class="text-xs text-slate-500">
                        Welcome back, {{ user?.name || 'User' }}
                    </p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <ProfileMenu :user="user" :csrf="csrf" />
            </div>
        </div>
    </header>
</template>

<script setup>
import ProfileMenu from './ProfileMenu.vue';

defineProps({
    title: {
        type: String,
        default: 'Dashboard',
    },
    user: {
        type: Object,
        default: null,
    },
    csrf: {
        type: String,
        default: '',
    },
});

defineEmits(['toggleSidebar']);
</script>
