<template>
    <div>
        <div class="text-gray-400 text-xs" v-text="label"></div>
        <div class="text-gray-200 text-sm">
            <span v-if="!type" v-text="value"></span>
            <a
                :href="`mailto:${value}`"
                class="text-teal-500 hover:text-teal-300 transition-all"
                v-text="value"
                v-if="type === 'email'"
            ></a>
            <a
                :href="`tel:${value}`"
                class="text-teal-500 hover:text-teal-300 transition-all"
                v-text="value"
                v-if="type === 'tel'"
            ></a>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        type: {
            default: function () {
                return null;
            },
        },
        value: {
            required: true,
        },
        label: {
            required: true,
        },
    },
};
</script>