<template> 
    <div class="container">   
        <div class="timer">     
            <v-label class="labelTime-style" >{{ formatTime }}</v-label> 
        </div>
    </div>
</template>
  
<script setup>
  import { computed, watch } from 'vue';
  import quizStore from '@/store/quizStore';
  
  const timer = quizStore.getters.timer;
  
  watch(timer, (val) => {
    console.log('CardTimer: timer value changed', val);
  }, { immediate: true });
  
  const formatTime = computed(() => { 
    const seconds = timer.value % 60;
    const minutes = Math.floor(timer.value / 60);
    const hours = Math.floor(minutes / 60);
    return `${pad(minutes % 60)}:${pad(seconds)}`;
  });

  const pad = (number) => { 
      return (number < 10 ? "0" : "") + number;
  };
</script>

<style>
	.container { 
		text-align: center; 
		margin-top: auto;
		margin-bottom: 1px;
		position: fixed;
		left: 0; 
		right: 0; 
		bottom: 0; 
		padding: 20px;
  }
  .timer { 
		margin-bottom: 15px;
  }
  .labelTime-style { 
		font-size: 40px !important; 
		font-weight: 500; 
		color: #d42828 !important; 
		opacity: 90% !important;
  }
</style>
