<template>
  <div
    v-if="showCountdown"
    class="home-sticky-countdown"
    :class="{ 'home-sticky-countdown--visible': visible }"
    aria-live="polite"
  >
    <div class="home-sticky-countdown__inner">
      <span class="home-sticky-countdown__dot" aria-hidden="true"></span>
      <span data-dc-ref="stickyCountdownLabelRef" class="home-sticky-countdown__label">Finale startet in</span>
      <span class="home-sticky-countdown__time" aria-label="Countdown bis zum Finale">
        <span data-dc-ref="sbdRef">00</span><span class="home-sticky-countdown__unit">T</span>
        <span data-dc-ref="sbhRef">00</span><span class="home-sticky-countdown__sep">:</span>
        <span data-dc-ref="sbmRef">00</span><span class="home-sticky-countdown__sep">:</span>
        <span data-dc-ref="sbsRef">00</span>
      </span>
      <a
        v-if="showPhase"
        :href="publicStreamUrl"
        target="_blank"
        rel="noopener noreferrer"
        class="home-sticky-countdown__cta"
      >
        Zur Show
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  showCountdown: boolean
  visible: boolean
  showPhase: boolean
  publicStreamUrl: string
}>()
</script>
