<script setup>
import Button from 'primevue/button';
import Menubar from 'primevue/menubar';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const navItems = ref([
    {
        label: 'Dashboard',
        icon: 'pi pi-home',
        command: () => router.push('/')
    },
    {
        label: 'Media',
        icon: 'pi pi-image',
        command: () => router.push('/medias')
    },
    {
        label: 'Articles',
        icon: 'pi pi-file',
        command: () => router.push('/articles')
    },
    {
        label: 'Settings',
        icon: 'pi pi-cog',
        command: () => router.push('/settings')
    }
]);

</script>

<template>
    <div class="flex flex-col min-h-screen">
        <header class="sticky top-0 z-50 shadow-md">
            <Menubar :model="navItems" class="!rounded-none">
                <template #start>
                    <div class="flex items-center pr-4">
                        <h2 class="m-0 text-2xl text-primary font-semibold">Admin Panel</h2>
                    </div>
                </template>
                <template #end>
                    <Button label="Logout" icon="pi pi-power-off" severity="secondary" text />
                </template>
            </Menubar>
        </header>

        <main class="flex-1 p-6 bg-surface-ground">
            <router-view />
        </main>
    </div>
</template>
