<script lang="ts" setup>
    import { computed } from 'vue';
    import { Nullable, UIColorName, UIColorValues, UISize } from '@/UI-kit/types';
    import { UIColor } from '@/UI-kit/constants';

    const props = withDefaults(
        defineProps<{
            size?: Nullable<UISize>;
            borderColor?: Nullable<UIColorValues> | string;
            borderColorLeft?: Nullable<UIColorValues | string>;
        }>(),
        {
            borderColor: UIColorName.Blue500,
            size: UISize.S,
            borderColorLeft: UIColor[UIColorName.Transparent],
        },
    );

    const classList = computed(() => ({
        [`--${props.size}-size`]: props.size,
    }));
</script>

<template>
    <div class="ui-loader" :class="classList" />
</template>

<style lang="scss" scoped>
    .ui-loader {
        border-radius: 100%;
        border-width: 4px;
        border-style: solid;
        border-color: v-bind(borderColor);
        border-left-color: v-bind(borderColorLeft);
        animation: loader-spin 1s infinite linear;

        // button size
        &.--xs-size {
            width: 12px;
            height: 12px;
            border-width: 2px;
        }

        &.--s-size {
            width: 22px;
            height: 22px;
        }

        &.--m-size {
            width: 32px;
            height: 32px;
        }

        &.--l-size {
            width: 42px;
            height: 42px;
        }

        @keyframes loader-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    }
</style>
