<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { folderViewModeOptions, useMailSettingsStore } from '@/stores/mailSettingsStore'

const mailSettingsStore = useMailSettingsStore()
const { folderViewMode } = storeToRefs(mailSettingsStore)
</script>

<template>
  <div class="pa-4">
    <h3 class="text-h6 mb-4">Display Settings</h3>

    <v-list>
      <v-list-item>
        <v-list-item-title>Folder navigation style</v-list-item-title>
        <v-list-item-subtitle>Choose how folders are displayed</v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="folderViewMode"
            :items="folderViewModeOptions"
            item-value="value"
            item-title="title"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>
    </v-list>
  </div>
</template>
