<script setup lang="ts">
defineProps<{
  activeTab: 'recent-added' | 'recent-played' | 'libraries'
}>()

defineEmits<{
  switchTab: [tab: 'recent-added' | 'recent-played' | 'libraries']
}>()
</script>

<template>
  <nav class="root-tabs">
    <button
      type="button"
      :class="{ active: activeTab === 'recent-added' }"
      @click="$emit('switchTab', 'recent-added')"
    >最近添加</button>
    <button
      type="button"
      :class="{ active: activeTab === 'recent-played' }"
      @click="$emit('switchTab', 'recent-played')"
    >最近播放</button>
    <button
      type="button"
      :class="{ active: activeTab === 'libraries' }"
      @click="$emit('switchTab', 'libraries')"
    >文件库</button>
  </nav>
</template>
