<template>
  <div class="question-nav-wrap">
    <div ref="questionNavRef" class="question-nav">
      <button
        v-for="index in total"
        :key="index"
        class="question-nav-item"
        :class="{ active: currentIndex === index - 1 }"
        type="button"
        @click="emit('update:currentIndex', index - 1)"
      >
        {{ index }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps<{
  total: number;
  currentIndex: number;
}>();

const emit = defineEmits<{
  (event: "update:currentIndex", value: number): void;
}>();

const questionNavRef = ref<HTMLDivElement>();

void props;
</script>

<style scoped lang="scss">
.question-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
}

.question-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 780px;

  &::-webkit-scrollbar {
    display: none;
  }
}

.question-nav-item {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  color: #9aa8bf;
  font-size: 28px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &.active {
    background: #fff9ea;
    color: var(--color-text-brand);
  }
}
</style>
