<template>
  <Button
    :className="activePanelTab === 'GENERAL' ? 'active' : ''"
    data-element="GENERAL"
    :isActive="activePanelTab === 'GENERAL'"
    @click="setActiveRightPanelTab('GENERAL', 'general')"
  >
    <span>{{ $t('rightPanel.general') }}</span>
  </Button>
  <div class="divider"></div>
  <Button
    :className="activePanelTab === 'APPEARANCE' ? 'active' : ''"
    data-element="APPEARANCE"
    :isActive="activePanelTab === 'APPEARANCE'"
    @click="setActiveRightPanelTab('APPEARANCE', 'appearance')"
  >
    <span>{{ $t('rightPanel.appearance') }}</span>
  </Button>
  <div class="divider"></div>
  <Button
    :className="activePanelTab === 'PREFERENCE' ? 'active' : ''"
    data-element="PREFERENCE"
    :isActive="activePanelTab === 'PREFERENCE'"
    @click="setActiveRightPanelTab('PREFERENCE', 'preferences')"
  >
    <span>{{ $t('rightPanel.preferences') }}</span>
  </Button>
</template>

<script setup>
  import { useViewerStore } from '@/stores/modules/viewer'

  defineProps(['activePanelTab'])
  const useViewer = useViewerStore()
  const setActiveRightPanelTab = (tab, mode) => {
    useViewer.setActiveElementTab('rightPanel', tab)
  }
</script>
