---
import Dropdown from "@components/UI/Dropdown.astro";

import { i18n } from "@i18n/utils";
const t = i18n.inferLangUseTranslations(Astro.url);

const themeList = [
  { name: t("settings.customization.theme.Alu"), value: "alu" },
  { name: t("settings.customization.theme.Macchiato"), value: "macchiato" },
  { name: t("settings.customization.theme.Mocha"), value: "mocha" },
  { name: "Rosé Pine", value: "rose_pine" },
];

const languageList = [
  { name: "English", value: "en" },
  { name: "Español", value: "es" },
  { name: "Français", value: "fr" },
  { name: "日本語", value: "jp" },
  { name: "中文", value: "zh" },
  { name: "Русский", value: "ru" },
];
---

<div class="settings-container">
  <div class="setting__theme">
    <label for="dropdown__selected-theme" aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
    <Dropdown buttonNameDefault="Alu" localStorageKey="alu__selectedTheme" dropdownList={themeList} id="dropdown__selected-theme" />
  </div>
  <div class="setting__language">
    <label for="dropdown__selected-language" aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
    <Dropdown buttonNameDefault="English" localStorageKey="alu__selectedLanguage" dropdownList={languageList} id="dropdown__selected-language" />
  </div>
</div>