<script setup>
    import { useI18n } from 'vue-i18n';
    
    const props = defineProps({
        address: {
            type: Object,
            required: true
        }
    });

    const { t } = useI18n()
</script>

<template>
    <div class="card-fixed addresx-box">
        <p>{{ t('loads.addressNameLoad') }}:  <span>{{ address.locationName }}</span></p>
        <p>{{ t('global.country') }}:  <span>{{ address?.country || 'Sin definir' }}</span></p>
        <p>{{ t('global.state') }}:  <span>{{ address?.state?.state_name }}</span></p>
        <p>{{ t('global.city') }}:  <span>{{ address?.city?.city_name }}</span></p>
        <p>{{ t('directory.zipCode') }}:  <span>{{ address?.postalCode }}</span></p>
        <p>{{ t('directory.address') }}:  <span>{{ address?.address }}</span></p>
    </div>
</template>

<style lang="scss" scoped>
    .addresx-box {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    p {
        margin: 0.2rem 0;
        font-size: 1rem;
        color: #323032;
    }

     p span {
        color: #323032;
        font-weight: 700;
    }
</style>