<script>
    import Sidebar from "../../components/Sidebar.svelte";

    export let data;

    let notifications = 3; // Contoh jumlah notifikasi
    let user = {
        name: "John Doe",
        avatar: "https://i.pravatar.cc/40", // Avatar placeholder
    };
</script>

<div class="flex h-screen">
    <Sidebar />

    <!-- Main Content -->
    <div class="flex-1 flex flex-col bg-gray-100 overflow-hidden">
        <!-- Navbar -->
        <div
            class="flex items-center justify-between bg-white shadow px-6 py-3 border-b"
        >
            <div class="text-lg font-semibold text-gray-700">Dashboard</div>

            <div class="flex items-center gap-6">
                <!-- Notifications -->
                <div class="relative">
                    <button class="text-gray-600 hover:text-gray-800 text-xl">
                        🔔
                    </button>
                    {#if notifications > 0}
                        <span
                            class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full"
                            >{notifications}</span
                        >
                    {/if}
                </div>

                <!-- Profile -->
                <div class="flex items-center gap-2">
                    <img
                        src={user.avatar}
                        alt="User Avatar"
                        class="w-8 h-8 rounded-full"
                    />
                    <span class="text-sm font-medium text-gray-700"
                        >{user.name}</span
                    >
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="flex-1 p-6 overflow-y-auto">
            <slot />
        </div>
    </div>
</div>
