<script setup>
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';

import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue';
import VnCard from 'components/common/VnCard.vue';

const route = useRoute();
const arrayData = useArrayData('Agency', {
    url: `Agencies/${route.params.id}`,
});
const { store } = arrayData;
onMounted(async () => await arrayData.fetch({ append: false }));
watch(
    () => route.params.id,
    async (newId) => {
        if (newId) {
            store.url = `Agencies/${newId}`;
            await arrayData.fetch({ append: false });
        }
    }
);
</script>
<template>
    <VnCard
        data-key="Agency"
        base-url="Agencies"
        :descriptor="AgencyDescriptor"
        searchbar-data-key="AgencyList"
        searchbar-url="Agencies"
        searchbar-label="agency.searchBar.label"
        searchbar-info="agency.searchBar.info"
    />
</template>
