<script setup lang="ts">
import { IProps } from "./props";

const props = withDefaults(defineProps<IProps>(), {
  size: "sm",
  variant: "primary",
});

function spinnerColor(): string {
  switch (props.variant) {
    case "primary":
      return "var(--primary-500)";
    case "secondary":
      return "var(--secondary-500)";
    case "orange":
      return "var(--orange-500)";
    case "red":
      return "var(--red-500)";
    case "green-dark":
      return "var(--green-dark-500)";
    default:
      return "var(--primary-500)";
  }
}
</script>

<template>
  <div class="spinner" :class="`spinner-${size}`" :style="{ '--spinner-color': spinnerColor() }" />
</template>

<style lang="scss" scoped>
.spinner {
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--spinner-color) 94%, transparent) top/3.8px 3.8px no-repeat,
    conic-gradient(transparent 30%, var(--spinner-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.8px), var(--spinner-color) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.8px), var(--spinner-color) 0);
  animation: spinner 0.6s infinite linear;
  @keyframes spinner {
    100% {
      transform: rotate(1turn);
    }
  }
}

.spinner-sm {
  width: var(--w-5);
  height: var(--h-5);
}

.spinner-md {
  width: var(--w-7);
  height: var(--h-7);
}

.spinner-lg {
  width: var(--w-9);
  height: var(--h-9);
}
</style>
