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

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

<template>
    <UIButton
        class="close-btn"
        :bg-color="UIColor[UIColorName.White]"
        :color="UIColor[UIColorName.Red600]"
        :size="UISize.Custom"
        @click="emit('click')"
    >
        <UISvgIcon
            class="close-btn__icon"
            :name="UIIcons.Close"
            :stroke="UIColor[UIColorName.Red600]"
        />
    </UIButton>
</template>

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

    .close-btn {
        @include index.flex(row, 12px, center, center);

        width: 28px;
        height: 28px;
        padding: 6px;
        border-radius: 100%;

        &__icon {
            width: 12px;
            height: 12px;
        }
    }
</style>
