<template>
  <div
    :style="styles"
    :class="[`text-${color}`, icon]"
    class="vc-loading-icon spin"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { convertToUnit } from '@/utils/helpers'

const DEFAULT_SIZE = 40

export default defineComponent({
  name: 'LoadIcon',
  props: {
    size: {
      type: [Number, String],
      default: DEFAULT_SIZE
    },
    color: {
      type: String,
      default: 'primary'
    },
    icon: {
      type: String,
      default: 'vc-icon-load'
    }
  },
  computed: {
    styles () {
      const size = convertToUnit(this.size)
      return {
        fontSize: size
      }
    }
  }
})
</script>

<style lang="scss" scoped>
$animationSpeed: 2.5s;

.vc-loading-icon {
  animation: spin $animationSpeed linear infinite;
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
