<template>
    <div class="row align-items-center justify-content-center w-100" style="left: 15px;">
        <div class="col text-center">
            <hollow-dots-spinner :animation-duration="1000" :dots-num="5" :color="getColor" class="m-auto"></hollow-dots-spinner>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { HollowDotsSpinner } from 'epic-spinners';

interface Props {
    color?: 'primary' | 'success' | 'danger' | 'white' | 'black';
}

const props = withDefaults(defineProps<Props>(), {
    color: 'primary'
});

const getColor = computed(() => {
    switch (props.color) {
        case 'primary': return '#00baa4';
        case 'success': return '#1ac86f';
        case 'danger': return '#ed5335';
        case 'white': return '#ffffff';
        case 'black': return '#000000';
        default: return '#00baa4';
    }
});
</script>
