<script lang="ts" setup>
    import { computed, defineProps, withDefaults, defineExpose, ref } from 'vue';

    type TitleType = 'default' | 'secondary';

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

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

    const el = ref<HTMLElement | null>(null);
    defineExpose({ el });
</script>

<template>
    <div ref="el" class="ui-title" :class="`ui-title__${type}`" :style="computedStyles">
        {{ title }}
    </div>
</template>
