<script setup>

defineProps({
  busy: {
    type: Boolean,
    default: false,
  },
  state: {
    validator(value) {
      return ['success', 'warning', 'danger', 'idle', ''].includes(value);
    }
  },
});

function color(state) {
  if (state === 'success') return '#27CE65';
  else if (state === 'idle') return '#BCD0C3';
  else if (state === 'warning') return '#f0ad4e';
  else if (state === 'danger') return '#d9534f';
  else return '#7c7c7c';
}

</script>

<template>
  <i class="fa" :class="{ 'fa-circle': !busy, 'fa-circle-notch fa-spin': busy, 'fa-fade': state === 'warning' }" :style="{ color: busy ? null : color(state) }"></i>
</template>
