<script setup lang="ts">
import * as _ from "lodash";

const props = defineProps<{
  // result: ResultEndType;
  countBasic: number;
  countAdvanced: number;
  question: BasicQuestion | AdvancedQuestion | undefined;
  questionBasic: BasicQuestion | undefined;
  questionAdvanced: AdvancedQuestion | undefined;
  now: string | null | undefined;
}>();

const isBasic = computed(() => props.now == "basic");
const isAdvanced = computed(() => props.now == "advanced");
</script>

<template>
  <div
    class="flex flex-col items-center p-4 gap-10 border-l border-slate-300 bg-slate-100"
  >
    <div>
      <button @click="$emit('end-exam')" class="btn-major">
        Wróć na stronę główną
      </button>
      <button @click="$emit('end-exam')" class="btn-major">
        Rozpocznij jeszcze raz
      </button>
    </div>
    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <button class="text-md text-white bg-blue-400">Pytania podstawowe</button>
      <button class="text-md text-white bg-blue-400">
        Pytania specjalistyczne
      </button>
    </div>
    <div class="w-full flex justify-center items-center">
      <div class="flex flex-row flex-wrap gap-2 items-stretch !w-max">
        <div
          v-for="num in _.range(1, 21)"
          class="p-1 bg-blue-500 text-white w-8 aspect-square text-center"
        >
          {{ num }}
        </div>
      </div>
    </div>
    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <button class="text-md text-white bg-blue-400">
        Odtwórz film ponownie
      </button>
      <button class="text-md text-white bg-blue-400">
        Pokaż poprawną odpowiedź
      </button>
    </div>
  </div>
</template>

<!-- <style></style> -->
