<template>
    <vue-countdown tag="div" :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
      <div class="time-box">
        <div class="time">
          <div class="time-number">{{ days }}</div>
          <div class="time-label">{{ t('Tage') }}</div>
        </div>
        <div class="time">
          <div class="time-number">{{ hours }}</div>
          <div class="time-label">{{ t('Stunden') }}</div>
        </div>
        <div class="time">
          <div class="time-number">{{ minutes }}</div>
          <div class="time-label">{{ t('Minuten') }}</div>
        </div>
        <div class="time">
          <div class="time-number">{{ seconds }}</div>
          <div class="time-label">{{ t('Sekunden') }}</div>
        </div>
      </div>
    </vue-countdown>
</template>

<style>
.component-dark{
    padding-top: 25px;
}
.time-box{
    height: 1000px;
    width: 100%;
    margin-top: 25px;
}

.time{
    height: 200px;
    width: 200px;
    text-align: center;
    background-color: #6495ed;
    border-radius: 22px;
    margin:25px auto;
}

.time-number{
    font-size: 86px;
    font-weight: 600;
    line-height: normal;
    padding-top: 40px;
}

@media (min-width: 500px) {
    .time-box{
        height: 500px;
        width: 500px;
        margin:0 auto;
    }

    .time{
        float: left;
        margin: 25px;
    }
}


@media (min-width: 1024px) {
    .time-box{
        padding-top:250px;
        width: 1000px;
    }
}




</style>

  <script lang="ts">
  import { useI18n } from 'vue-i18n'
  export default {
    props: {
      time: {
        type: Number,
        required: true
      }
    },
    setup() {
        const { t } = useI18n({
            inheritLocale: true
          })
          return{
            t
          }
    }
  };
  </script>
