<!-- src/pages/customer/profile/profile/CustomerDetails.vue -->
<template>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body p-4 sm:p-6">
      <div class="flex justify-between items-center">
        <h2 class="card-title">Customer Details</h2>
        <span class="badge" :class="automatic_status === 1 ? 'badge-success' : 'badge-ghost'">
          {{ automatic_status === 1 ? 'Automatic' : 'Will Call' }}
        </span>
      </div>
      <div class="text-error font-semibold mt-2" v-if="!customer.correct_address">
        Possible Incorrect Address!
      </div>
      <div class="mt-4 space-y-2 text-sm">
        <p><strong>{{ customer.customer_first_name }} {{ customer.customer_last_name }}</strong></p>
        <p>{{ customer.customer_address }}<span v-if="customer.customer_apt">, {{ customer.customer_apt }}</span></p>
        <p>{{ customer.customer_town }}, {{ stateName(customer.customer_state) }} {{ customer.customer_zip }}</p>
        <p class="pt-2">{{ customer.customer_phone_number }}</p>
        <p><span class="badge badge-outline badge-sm">{{ homeTypeName(customer.customer_home_type) }}</span></p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  customer: { type: Object, required: true },
  automatic_status: { type: Number, required: true },
});

const stateName = (id: number) => ['MA', 'RI', 'NH', 'ME', 'VT', 'CT', 'NY'][id] || 'N/A';
const homeTypeName = (id: number) => ['Residential', 'Apartment', 'Condo', 'Commercial', 'Business', 'Construction', 'Container'][id] || 'Unknown';
</script>