<template>
  <button tabindex="-1"
    class="play-button pointer-events-none rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
    :class="{ loading: isLoading }" :disabled="isLoading">
    <template v-if="isLoading">
      <img src="/loader.svg" alt="Chargement" class="size-16" />
    </template>
    <template v-else>
      {{ isPlaying ? 'I I' : '▶' }}
    </template>
  </button>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  isLoading?: boolean;
  isPlaying?: boolean;
}>(), {
  isLoading: false,
  isPlaying: false
})
</script>

<style>
.loading,
.play-button-changed {
  opacity: 1 !important;
}
</style>
