<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import Logo from '@/components/common/Logo.vue'
import { useAuth } from '@/composables/useAuth'

const { user } = useAuth()

const logoutForm = useForm({})

function logout() {
  logoutForm.post('/logout')
}

const sidebarLinks = [
  {
    label: 'Dashboard',
    icon: 'i-lucide-house',
    to: '/dashboard',
  },
]
</script>

<template>
  <UApp>
    <UDashboardGroup>
      <UDashboardSidebar collapsible>
        <template #header>
          <Logo :link-to-home="false" size="sm" />
        </template>

        <UNavigationMenu :items="sidebarLinks" />

        <template #footer>
          <div class="flex items-center gap-2 px-2">
            <UAvatar :alt="user?.full_name" size="sm" />
            <div class="flex-1 truncate text-sm">
              <p class="font-medium truncate">
                {{ user?.full_name }}
              </p>
              <p class="text-muted truncate text-xs">
                {{ user?.email }}
              </p>
            </div>
            <UButton
              icon="i-lucide-log-out"
              variant="ghost"
              size="sm"
              :loading="logoutForm.processing"
              @click="logout"
            />
          </div>
        </template>
      </UDashboardSidebar>

      <slot />
    </UDashboardGroup>
  </UApp>
</template>
