<script setup lang="ts">
defineProps<{
  points: number | undefined;
  category: string | undefined;
  timeRemaining?: string | undefined;
}>();
</script>

<template>
  <div
    class="flex flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-slate-300 bg-slate-100"
  >
    <div>
      <span class="block">Wartość punktowa</span>
      <div class="info-little-box">
        {{ points }}
      </div>
    </div>
    <div>
      <span class="block">Aktualna kategoria (implement)</span>
      <div class="info-little-box">{{ category }}</div>
    </div>
    <div v-if="typeof timeRemaining === 'string'">
      <span class="block">Czas do końca egzaminu (implement)</span>
      <div class="info-little-box">{{ timeRemaining }}</div>
    </div>
  </div>
</template>
