<script setup lang="ts">
    import { UIColorName, UIColorValues, valueof } 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;
            isHideIcon?: boolean;
            isHideLine?: boolean;
            icon?: valueof<typeof UIIcons>;
        }>(),
        {
            color: UIColor[UIColorName.Blue500],
            bgColor: UIColor[UIColorName.Blue015],
            isHideIcon: false,
            isHideLine: false,
            text: '',
            icon: UIIcons.Warn,
        },
    );

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

    const bgColor = computed(() => props.color);
</script>

<template>
    <div
        :style="style"
        class="ui-info"
        :class="{
            '--line': !isHideLine,
        }"
    >
        <UISvgIcon v-if="!isHideIcon" class="ui-info__icon" :name="icon" />
        <slot>
            <div v-html="text" />
        </slot>
    </div>
</template>

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

    .ui-info {
        @include index.flex(row, 8px);
        @include index.text(14px, 400, 20px);

        position: relative;
        height: auto;
        padding: 12px;
        border-radius: 8px;
        overflow: hidden;

        &.--line {
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background: v-bind(bgColor);
                content: '';
            }
        }

        &__icon {
            min-width: 16px;
            min-height: 16px;
        }
    }
</style>
