<script setup lang="ts">
import "7.css/dist/7.scoped.css";

defineProps<{
  questionaries: BasicQuestion[] | null;
  count: number;
  data: BasicQuestion[] | null;
}>();
</script>

<template>
  <div class="flex flex-col items-center">
    <div>
      <button class="btn-major">Zakończ egzamin</button>
    </div>
    <div class="flex flex-row">
      <div>
        Pytania podstawowe
        <div class="win7">
          <div
            role="progressbar"
            class="animate"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="80"
          >
            <div class="w-[60%] relative">
              <div class="absolute top-0 w-full text-center">
                {{ count + 1 }} / {{ data?.length }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        Pytania specjalistyczne
        <div class="progressive">{{ count + 1 }} / {{ data?.length }}</div>
      </div>
    </div>
    <div>TimeLeft (implement)</div>
    <div>
      <button @click="$emit('next-question')" class="btn-major">
        Następne pytanie
      </button>
    </div>

    <br />
    {{ questionaries }}
  </div>
</template>
