<!-- src/pages/customer/profile/profile/ProfileHeader.vue -->
<template>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body p-4 sm:p-6">
      <h2 class="card-title text-2xl">{{ customer.account_number }}</h2>
      <div class="divider my-2"></div>
      <div class="rounded-lg overflow-hidden" style="height:400px; width:100%">
        <l-map ref="map" v-model:zoom="zoom" :center="[customer.customer_latitude, customer.customer_longitude]">
          <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
        </l-map>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";

defineProps({
  customer: { type: Object, required: true },
  automatic_status: { type: Number, required: true },
});
defineEmits(['toggleAutomatic']);
const zoom = ref(14);
</script>
