<script setup>
import { theme } from "@/store";
import RadioButtons from "@/components/settings/radio-buttons.vue";
import i18n, { language, localeNames } from "@/i18n";
</script>

<template>
  <h2>{{ $t("settings.heading.theme") }}</h2>
  <p>{{ $t("settings.text.theme") }}</p>
  <RadioButtons
    :options="[
      $t('settings.theme.auto'),
      $t('settings.theme.light'),
      $t('settings.theme.dark'),
    ]"
    :values="['auto', 'light', 'dark']"
    v-model="theme"
  />
  <div class="spacer" />
  <h2>{{ $t("settings.heading.language") }}</h2>
  <p>{{ $t("settings.text.language") }}</p>
  <RadioButtons
    :options="i18n.global.availableLocales.map((locale) => localeNames[locale])"
    :values="i18n.global.availableLocales"
    v-model="language"
  />
</template>

<style scoped>
h2 {
  margin: 0px;
}

p {
  margin: 5px 0px;
}

.spacer {
  height: 20px;
}
</style>
