<script setup>
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

onMounted(() => {
  let lang = localStorage.getItem("lang");

  if (lang && lang !== "") {
    chooseLang(lang);
  }
});

function chooseLang(lang) {
  localStorage.setItem("lang", lang);
  router.push("/skylantern");
}

let langList = reactive([
  {
    lang: "中文",
    value: "zh-tw",
  },
  {
    lang: "English",
    value: "en-us",
  },
  {
    lang: "日本語",
    value: "ja-jp",
  },
  {
    lang: "한국어",
    value: "ko-kr",
  },
]);
</script>

<template>
  <div class="lang-content">
    <div style="position: relative">
      <section>
        <p>請選擇您的語言</p>
      </section>
      <button
        v-for="(item, index) in langList"
        :key="index"
        @click="chooseLang(item.value)"
        class="main-btn"
      >
        {{ item.lang }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.lang-content {
  background-image: url("@/assets/img/tandan.webp");
}
</style>
