<script setup lang="ts">
import type { CustomerResponse } from '#open-fetch'
defineProps<{
  customer: CustomerResponse<any>
}>()

</script>

<template>
<UCard
class="bg-gradient-to-b from-white to-slate-50
       border border-slate-200 shadow-sm rounded-xl"
>
  <template #header>
    <div class="flex items-center justify-between">

      <!-- Avatar + Name -->
      <div class="flex items-center gap-3">
        <UAvatar
          :alt="customer.first_name"
          size="lg"
          class="bg-primary-100 text-primary-700"
        />
        <div>
          <div class="font-semibold text-slate-900 text-lg">
            {{ customer.first_name }} {{ customer.last_name }}
          </div>
          <div class="text-sm text-slate-500">
            {{ customer.email }}
          </div>
        </div>
      </div>

    </div>
  </template>

  <div class="space-y-3 text-sm mt-4">
    <div class="flex justify-between">
      <span class="text-slate-500">Birth Date</span>
      <span class="text-slate-700">{{ customer.birth_date }}</span>
    </div>

    <div class="flex justify-between">
      <span class="text-slate-500">Gender</span>
      <span class="text-slate-700 capitalize">
        {{ customer.gender }}
      </span>
    </div>

    <div class="flex justify-between">
      <span class="text-slate-500">Phone</span>
      <span class="text-slate-700">
        {{ customer.phone }}
      </span>
    </div>
  </div>

  <template #footer>
    <div class="flex justify-between pt-4 border-t border-slate-100">
      <UButton
        as="NuxtLink"
        size="xs"
        variant="ghost"
        :to="{ name: 'customers-id', params: { id: customer.id } }"
      >
        View
      </UButton>

      <UButton size="xs" variant="ghost" color="primary">
        Policies
      </UButton>
    </div>
  </template>
</UCard>
</template>
