---
import Layout from "../../../layouts/Layout.astro";
import SettingsLayout from "../../../layouts/SettingsLayout.astro";
import SettingsSection from "../../../layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
import ThemeCard from "../../../components/settings/ThemeCard.astro";
import { Icon } from "astro-icon/components";
import fortnite from "../../../assets/fortnite.jpg";
import ClassicNebula from "../../../assets/classic_theme.png";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
  const STATIC_PATHS = [
    { params: { lang: "en_US" } },
    { params: { lang: "jp" } },
  ];
  return STATIC_PATHS;
}
export const prerender = true;
---

<Layout title="Settings">
  <SettingsLayout title={t("settings.appearance")}>
    <SettingsSection
      title="Theme"
      subtitle="Choose a theme so your eyes don't hate us."
    >
      <div class="flex flex-row flex-wrap gap-4">
        <div onclick="install()">
          <ThemeCard image={ClassicNebula} title="Classic Nebula" />
        </div>
        <div class="rounded-3xl bg-navbar-color w-64 flex flex-col">
          <div class="w-full items-center justify-center flex aspect-[16/9]">
            <Icon name="ph:plus-bold" class="h-16 w-16" />
          </div>
          <div class="h-2/6 text-center content-center p-3 font-semibold">
            Get more themes in the <strong>Nebula Catalog!</strong>
          </div>
        </div>
      </div>
    </SettingsSection>
  </SettingsLayout>
</Layout>
<script is:inline>
  function install() {
    localStorage.removeItem("background_video");
    localStorage.removeItem("background_image");
    localStorage.removeItem("stylesheet");
    location.reload();
  }
</script>
