<script setup lang="ts">
import type { TrackingObject } from '#layers/types/api/common'

interface Props {
  bgColor?: string
  tracking: TrackingObject
}

const props = defineProps<Props>()

const { locale } = useI18n()
const { sendLog } = useAnalytics()

const handlePlayClick = () => {
  sendLog(locale.value, props.tracking)
}
</script>

<template>
  <button
    class="btn-play"
    :style="{ backgroundColor: props.bgColor }"
    @click="handlePlayClick"
  >
    <span class="icon">
      <AtomsIconsArrowRightFill />
    </span>
    <span class="sr-only">Play</span>
  </button>
</template>

<style scoped>
.btn-play {
  @apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px]
  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
  hover:after:opacity-10;
}
.btn-play:hover .icon {
  @apply scale-[1.08];
}
.icon {
  @apply transition-transform duration-300 ease-spring;
}
</style>
