<template>
  <div class="flex items-center gap-2 rounded-full bg-surface-200 p-1">
    <button
      class="mode-btn"
      :class="{ active: store.isGuidedMode }"
      @click="setMode('guided')"
    >
      <div class="i-lucide-book-open h-3.5 w-3.5" />
      <span class="hidden sm:inline">Guidé</span>
    </button>
    <button
      class="mode-btn"
      :class="{ active: !store.isGuidedMode }"
      @click="setMode('free')"
    >
      <div class="i-lucide-headphones h-3.5 w-3.5" />
      <span class="hidden sm:inline">Libre</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { PlayerMode } from '~/types/player'

const store = usePlayerStore()

function setMode(mode: PlayerMode) {
  store.setMode(mode)
}
</script>

<style scoped>
.mode-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(0 0% 100% / 0.5);
  transition: all 0.2s;
}

.mode-btn:hover {
  color: hsl(0 0% 100% / 0.8);
}

.mode-btn.active {
  background: hsl(12 76% 48%);
  color: white;
}
</style>
