<script setup>
const props = defineProps(['class'])

import { usePostsStore } from '@/stores/posts.js'
import Countdown from '@/components/Countdown.vue'
import { onMounted, ref } from 'vue'
import { ChevronDown } from 'lucide-vue-next'

const enableCountdown = ref(false)
const countdownDate = ref(new Date('2024-07-28 07:00:00'))

onMounted(() => {
  const now = new Date().getTime()
  const distance = countdownDate.value.getTime() - now
  if (distance > 0) {
    enableCountdown.value = true
  }
})

const postsStore = usePostsStore()
</script>

<template>
  <div :class="props.class" ref="section" data-anchor="welcome-section">
    <div class="flex flex-col w-full h-full items-center justify-center text-center">
      <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
        3 semaines pour traverser 7 pays d'Europe en train
      </h3>
      <p v-if="postsStore.posts.length > 0" class="mx-4">
        suivez mon voyage en naviguant vers le bas
      </p>
      <div v-if="postsStore.posts.length > 0" class="arrow mt-6">
        <ChevronDown size="96" />
      </div>
      <div v-else>
        <p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
        <div class="mt-16 mx-4" v-if="enableCountdown">
          <p>ça commence dans...</p>
          <Countdown class="text-3xl font-extrabold" :date="countdownDate" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.arrow {
  animation: arrowAnimation 3s infinite;
}

@keyframes arrowAnimation {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 40px);
  }
}
</style>
