<script setup lang="ts">
import type { Duration } from 'date-fns';

const props = defineProps<{
  points: number | null | undefined;
  category: string | undefined;
  timeRemaining?: Duration | undefined;
}>();

const timeRemainingFriendly = computed(() => {
  if (typeof props.timeRemaining !== 'undefined') {
    const seconds = props.timeRemaining.seconds ?? 0;
    return `${props.timeRemaining.minutes ?? 0}:${
      seconds >= 0 && seconds < 10 ? 0 : ''
    }${seconds ?? 0}`;
  }
  return null;
});
</script>

<template>
  <div
    class="flex flex-none flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-base-300 bg-base-100"
  >
    <div>
      <span class="block">{{ $t('pointValue') }}</span>
      <div class="info-little-box">
        {{ points }}
      </div>
    </div>
    <div>
      <span class="block">{{ $t('currentCategory') }}</span>
      <div class="info-little-box">
        {{ category }}
      </div>
    </div>
    <div v-if="typeof timeRemaining !== 'undefined'">
      <span class="block">{{ $t('timeToExamEnd') }}</span>
      <div class="info-little-box w-20 text-center">
        {{ timeRemainingFriendly }}
      </div>
    </div>
  </div>
</template>
