<script setup lang="ts">
    import { UIColorName, UIColorValues, UIIconsValues } from '@/UI-kit/types';
    import { UIColor, UIIcons } from '@/UI-kit/constants';
    import { computed } from 'vue';
    import UISvgIcon from '@/UI-kit/components/UI/svg-icon/UISvgIcon.vue';

    const props = withDefaults(
        defineProps<{
            text: string;
            color?: UIColorValues;
            bgColor?: UIColorValues;
            icon?: UIIconsValues | null;
        }>(),
        {
            color: UIColor[UIColorName.Red600],
            bgColor: UIColor[UIColorName.Red50],
            icon: null,
        },
    );

    const style = computed(() => ({
        backgroundColor: props.bgColor,
        color: props.color,
    }));
</script>

<template>
    <div :style="style" class="ui-chip">
        <UISvgIcon v-if="icon" class="ui-chip__icon" :name="icon" />
        <!-- eslint-disable-next-line vue/no-v-html -- поддержка историй с разметкой -->
        <div class="ui-chip__text" v-html="text" />
    </div>
</template>

<style scoped lang="scss">
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .ui-chip {
        @include index.flex(row, 6px, center, flex-start);

        box-sizing: border-box;
        max-width: 100%;
        padding: 4px 10px 4px 6px;
        border-radius: 100px;

        @include index.text(11px, 500, 14px, inherit);
    }

    .ui-chip__icon {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
    }

    .ui-chip__text {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
