<script setup lang="ts">
    import { computed } from 'vue';

    type TitleType = 'default' | 'primary' | 'secondary' | string;

    const props = withDefaults(
        defineProps<{
            description?: string;
            title?: string | symbol;
            fontSize?: string;
            color?: string;
            fontWeight?: string;
            type?: TitleType;
        }>(),
        {
            description: '',
            title: '',
            fontSize: '14px',
            color: '#ffff',
            fontWeight: '600',
            type: 'default',
        },
    );

    const computedStyles = computed(() => ({
        fontSize: props.fontSize,
        color: props.color,
        fontWeight: props.fontWeight,
    }));
</script>

<template>
    <span class="ui-description" :style="computedStyles" v-html="description" />
</template>
