<script setup>
import { onBeforeMount, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const tooltip = ref('');

const $props = defineProps({
    transaction: {
        type: Object,
        required: true,
    },
});

onBeforeMount(() => {
    const errorMessage = $props.transaction.errorMessage
        ? $props.transaction.errorMessage
        : '';
    const responseMessage = $props.transaction.responseMessage
        ? $props.transaction.responseMessage
        : '';
    tooltip.value = `${errorMessage} ${responseMessage}`;
});
</script>

<template>
    <div
        v-if="
            ($props.transaction.errorMessage || $props.transaction.responseMessage) &&
            !$props.transaction.isConfirmed
        "
    >
        <QIcon color="negative" name="close" size="sm">
            <QTooltip>{{ tooltip }}</QTooltip>
        </QIcon>
    </div>
    <div v-if="$props.transaction.isConfirmed">
        <QIcon color="positive" name="check" size="sm">
            <QTooltip>{{ t('Confirmed') }}</QTooltip>
        </QIcon>
    </div>
</template>

<i18n>
es:
    Confirmed: Confirmada
</i18n>
