<template>
  <div class="mode-switcher">
    <button
      v-for="m in modes"
      :key="m.id"
      @click="uiMode.setMode(m.id)"
      class="mode-switcher-btn"
      :class="{ 'mode-switcher-btn-active': uiMode.mode === m.id }"
    >
      {{ m.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { useUIModeStore } from '@/stores/uiMode'
import type { UIMode } from '@/types/api'

const uiMode = useUIModeStore()

const modes: { id: UIMode; label: string }[] = [
  { id: 'easy', label: 'Easy' },
  { id: 'gamer', label: 'Pro' },
  { id: 'chat', label: 'Chat' },
]
</script>
