<template>
  <address-render-box
    :address="props.address"
    :show-button-details="false"
  ></address-render-box>
  <address-details-ref-matching
    :address="props.address"
    @update-address="onUpdateAddress"
  ></address-details-ref-matching>
  <address-details-map :address="props.address"></address-details-map>
  <address-details-geographical-layers
    :address="props.address"
  ></address-details-geographical-layers>
</template>

<script lang="ts" setup>
import { Address } from "../../../types";
import AddressDetailsMap from "./Parts/AddressDetailsMap.vue";
import AddressRenderBox from "../Entity/AddressRenderBox.vue";
import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographicalLayers.vue";
import AddressDetailsRefMatching from "./Parts/AddressDetailsRefMatching.vue";

interface AddressModalContentProps {
  address: Address;
}

const props = defineProps<AddressModalContentProps>();

const emit = defineEmits<(e: "update-address", value: Address) => void>();

const onUpdateAddress = (address: Address): void => {
  emit("update-address", address);
};
</script>

<style scoped></style>
