<script lang="ts" setup>
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import type { UserDetail } from '../types/user.types'

defineProps<{
  user: UserDetail
  embedded?: boolean
}>()
</script>

<template>
  <div :class="embedded ? '' : 'mt-5'">
    <Box raised="single" class="p-6">
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
      </div>

      <div v-if="user.heirs?.length" class="space-y-3">
        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
          <div class="flex flex-wrap items-center gap-2">
            <span class="font-medium text-slate-900">{{ heir.name }}</span>
            <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
            <Badge look="outline">{{ heir.relationship }}</Badge>
          </div>
          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
        </div>
      </div>

      <div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
        Tiada penama direkodkan.
      </div>
    </Box>
  </div>
</template>
