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

interface Props {
  category?: 'system' | 'image'
  backgroundColor?: string
  tracking: TrackingObject
}

const props = withDefaults(defineProps<Props>(), { category: 'system' })

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

const buttonClasses = computed(() => [
  'btn-play',
  props.category === 'system' ? 'play-icon' : 'play-image',
])

const buttonStyle = computed(() =>
  props.category === 'system' && props.backgroundColor
    ? { backgroundColor: props.backgroundColor }
    : {}
)

const onClick = () => sendLog(locale.value, props.tracking)
</script>

<template>
  <button :class="buttonClasses" :style="buttonStyle" @click="onClick">
    <span v-if="props.category === 'system'" class="icon">
      <AtomsIconsArrowRightFill />
    </span>
    <span class="sr-only">Play</span>
  </button>
</template>

<style scoped>
.btn-play {
  @apply relative flex items-center justify-center;
}

.play-icon {
  @apply w-[60px] h-[60px] md:w-[80px] md:h-[80px] rounded-full
  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;
}
.play-icon:hover .icon {
  @apply scale-[1.08];
}
.icon {
  @apply transition-transform duration-300 ease-spring;
}

.play-image {
  @apply w-[69px] h-[69px] md:w-[110px] md:h-[110px];
}
.play-image::before {
  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default.png)] transition-opacity duration-300 ease-out;
}
.play-image::after {
  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
}
.play-image:hover::before {
  @apply opacity-0;
}
.play-image:hover::after {
  @apply opacity-100;
}
</style>
