<script setup lang="ts">
import { NButton } from 'naive-ui'

export interface GroupItem {
  id: number | string
  name: string | number
}

export interface QuestionListItem {
  id: number | string
  name: string | number
}

defineProps<{
  groups: GroupItem[]
  questionList: QuestionListItem[]
  groupId: number | string // 分组ID
  questionId: number | string // 题目ID
}>()

const emit = defineEmits<{
  (e: 'update:groupId', id: number | string): void
  (e: 'update:questionId', id: number | string): void
}>()
</script>

<template>
  <div class="flex flex-col gap-2">
    <div class="scrollbar-hide flex gap-3 overflow-x-auto pb-2">
      <NButton
        v-for="group in groups" :key="group.id" round size="large"
        :type="groupId === group.id ? 'primary' : 'default'" :secondary="groupId !== group.id"
        class="px-6 font-bold transition-all" :class="{ 'shadow-lg shadow-blue-500/30': groupId === group.id }"
        @click="emit('update:groupId', group.id)"
      >
        {{ group.name }}
      </NButton>
    </div>

    <div class="scrollbar-hide flex gap-3 overflow-x-auto pb-2">
      <NButton
        v-for="item in questionList" :key="item.id" round size="large"
        :type="questionId === item.id ? 'primary' : 'default'" :secondary="questionId !== item.id"
        class="px-6 font-bold transition-all" :class="{ 'shadow-lg shadow-blue-500/30': questionId === item.id }"
        @click="emit('update:questionId', item.id)"
      >
        {{ item.name }}
      </NButton>
    </div>
  </div>
</template>

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
