<script setup lang="ts">
    import { UICard, UIButton, UIColor, UIColorName } from '@/index';
    import rmLightIcon from '@/UI-kit/assets/images/icon/rm-light.svg';

    const props = withDefaults(
        defineProps<{
            title?: string;
            text?: string;
            btnText?: string;
            maxWidth?: string;
            defaultIcon?: boolean;
        }>(),
        {
            title: '',
            text: '',
            btnText: '',
            maxWidth: '',
            defaultIcon: true,
        },
    );

    const emit = defineEmits<{
        'button:click': [void];
    }>();
</script>

<template>
    <UICard class="ui-empty" :style="{ maxWidth: props.maxWidth }">
        <div class="ui-empty__body">
            <div v-if="$slots.icon || props.defaultIcon" class="ui-empty__icon">
                <slot name="icon">
                    <img :src="rmLightIcon" alt="" class="ui-empty__icon-img" />
                </slot>
            </div>

            <div v-if="props.title" class="ui-empty__title" v-html="props.title" />
            <div v-if="props.text" class="ui-empty__text" v-html="props.text" />

            <UIButton
                v-if="props.btnText"
                :bg-color="UIColor[UIColorName.Blue500]"
                :color="UIColor[UIColorName.White]"
                class="ui-empty__btn"
                @click="emit('button:click')"
            >
                <span v-html="props.btnText" />
            </UIButton>
        </div>
    </UICard>
</template>

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

    .ui-empty {
        width: 100%;
        margin: 10px auto 0;
        background: transparent;
        box-shadow: none;

        @media (height >= 670px) {
            margin-top: 0;
        }

        &__body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        &__icon {
            margin: 0 auto;
        }

        &__icon-img {
            display: block;
            width: 76px;
            height: 76px;
            object-fit: contain;
        }

        &__title {
            @include index.text(16px, 700, 24px, var(--gray-900));

            text-align: center;
        }

        &__text {
            @include index.text(14px, 500, 24px, var(--gray-600));

            text-align: center;
        }
    }
</style>
