<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { KeyRound, Palette, User } from '@lucide/vue';
import { computed } from 'vue';
import AdminLayout from '@/layouts/AdminLayout.vue';
import { cn } from '@/lib/utils';

import { profile, password, appearance } from '@/routes/admin/account';

const page = usePage();

const currentPath = computed(() => page.url.split('?')[0]);

const navItems = [
    {
        href: profile.url(),
        label: 'Profil',
        icon: User,
    },
    {
        href: password.url(),
        label: 'Kata Sandi',
        icon: KeyRound,
    },
    {
        href: appearance.url(),
        label: 'Tampilan',
        icon: Palette,
    },
];
</script>

<template>
    <AdminLayout>
        <div class="space-y-6">
            <div class="space-y-1">
                <h2 class="text-2xl font-bold tracking-tight">
                    Akun
                </h2>
            </div>

            <div class="flex flex-col gap-6 lg:flex-row">
                <nav class="flex shrink-0 flex-row gap-1 overflow-x-auto lg:w-56 lg:flex-col lg:overflow-visible">
                    <Link v-for="item in navItems" :key="item.href" :href="item.href" :class="cn(
                        'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
                        currentPath === item.href
                            ? 'bg-accent text-accent-foreground'
                            : 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground',
                    )">
                        <component :is="item.icon" class="size-4 shrink-0" />
                        {{ item.label }}
                    </Link>
                </nav>

                <div class="min-w-0 flex-1">
                    <slot />
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
