<script setup lang="ts">
interface Props {
  barBgColor?: string
  height?: string
}

withDefaults(defineProps<Props>(), {
  barBgColor: '#363636',
  height: '12px',
})
</script>

<template>
  <div class="music">
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
    <div class="bar" />
  </div>
</template>

<style lang="scss" scoped>
.music {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 42px;
  height: v-bind(height);

  .bar {
    width: 2px;
    /* stylelint-disable-next-line value-keyword-case */
    background: v-bind(barBgColor);
    border-radius: 50px;
    animation: loader 1.5s ease-in-out infinite;

    &:nth-child(1) {
      /* background: purple; */
      animation-delay: 1s;
    }

    &:nth-child(2) {
      /* background: crimson; */
      animation-delay: 0.8s;
    }

    &:nth-child(3) {
      /* background: deeppink; */
      animation-delay: 0.6s;
    }

    &:nth-child(4) {
      /* background: orange; */
      animation-delay: 0.4s;
    }

    &:nth-child(5) {
      /* background: gold; */
      animation-delay: 0.2s;
    }

    &:nth-child(6) {
      /* background: gold; */
      animation-delay: 0.2s;
    }

    &:nth-child(7) {
      /* background: gold; */
      animation-delay: 0.4s;
    }

    &:nth-child(8) {
      /* background: deeppink; */
      animation-delay: 0.6s;
    }

    &:nth-child(9) {
      /* background: crimson; */
      animation-delay: 0.8s;
    }

    &:nth-child(10) {
      /* background: purple; */
      animation-delay: 1s;
    }
  }
}

@keyframes loader {
  0% {
    height: 4px;
  }

  50% {
    height: v-bind(height);
  }

  100% {
    height: 4px;
  }
}
</style>
