<script setup lang="ts">
    import { computed } from 'vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, usePage } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Label } from '@/components/ui/label';

    interface Profile {
        id: string
        username: string
        name: string
    };

    // Grab the Inertia page props
    const page = usePage<{ profile: Profile }>();

    // Reactive profile object
    const profile = computed(() => page.props.profile);

    // Breadcrumbs: Dashbord > Brukere > [username]
    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord',        href: '/dashboard' },
        { title: 'Brukere',         href: '/smartdok/profiles' },
        { title: profile.value.username, href: route('smartdok.profiles.show', profile.value.id) },
    ];
</script>

<template>
  <Head title="Vis bruker" />

  <AppLayout :breadcrumbs="breadcrumbs">
    <div class="p-6 space-y-8">
      <!-- Heading and action buttons -->
      <div class="flex items-center justify-between">
        <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
          Vis bruker
        </h3>
        <div class="flex space-x-2">
          <Link :href="route('smartdok.profiles.index')">
            <Button variant="outline">Tilbake</Button>
          </Link>
          <Link :href="route('smartdok.profiles.edit', profile.id)">
            <Button>Rediger</Button>
          </Link>
        </div>
      </div>

      <!-- Profile details -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <Label for="username">ID</Label>
          <p id="username" class="mt-1 text-base">
            {{ profile.id }}
          </p>
        </div>
        <div>
          <Label for="username">Brukernavn</Label>
          <p id="username" class="mt-1 text-base">
            {{ profile.username }}
          </p>
        </div>
        <div>
          <Label for="name">Navn</Label>
          <p id="name" class="mt-1 text-base">
            {{ profile.name }}
          </p>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
