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

    withDefaults(
        defineProps<{
            text?: string;
            leftIcon?: UIIconsValues | null;
            rightIcon?: UIIconsValues | null;
        }>(),
        {
            text: '',
            leftIcon: null,
            rightIcon: null,
        },
    );
</script>

<template>
    <UICard class="ui-block-card">
        <UISvgIcon
            v-if="leftIcon"
            class="ui-block-card__icon-left"
            :name="leftIcon"
            :color="UIColor[UIColorName.Blue500]"
        />
        <div class="ui-block-card__text">
            <slot>
                <div v-html="text" />
            </slot>
        </div>
        <UISvgIcon
            v-if="rightIcon"
            class="ui-block-card__icon-right"
            :name="rightIcon"
            :color="UIColor[UIColorName.Blue500]"
        />
    </UICard>
</template>

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

    .ui-block-card {
        @include index.text(14px, 600, 20px);
        @include index.flex(row, 12px, center, space-between);

        color: var(--gray-900);

        &__text {
            width: 100%;
        }

        &__icon {
            &-left {
                min-width: 28px;
                width: 28px;
                height: 26px;
                min-height: 26px;
            }

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