<template>
    <span class="uk-flex uk-flex-middle">
        <template v-if="type === 'if'">
            IF <span class="uk-icon" uk-icon="bolt" ratio="0.5"></span> {{ label }}
        </template>

        <template v-else-if="type === '/if'">
            {{ label }} <span class="uk-icon" uk-icon="bolt" ratio="0.5"></span> IF
        </template>

        <template v-else>
            <span class="uk-icon" uk-icon="bolt" ratio="0.5"></span> ELSE
            <span class="uk-icon" uk-icon="bolt" ratio="0.5"></span>
        </template>
    </span>
</template>

<script>
export default {
    name: 'ConditionWidget',

    inject: ['$node'],

    props: {
        type: {
            type: String,
            required: true,
        },
        value: {
            type: Object,
            required: true,
        },
    },

    computed: {
        label() {
            return this.value?.label || this.$t('Condition');
        },
    },
};
</script>
