<script setup>
import { Link } from "@inertiajs/inertia-vue3";
import { i18n } from "@/assets/locales/l180loca.js";

import { watch, ref, onMounted } from "vue";
var check = ref(false);
var languages = ref("English");

onMounted(() => {
    // ref value
    localStorage.getItem("selected_ar")
        ? (languages.value = "English")
        : (languages.value = "العربية");
    //  i18n local

    localStorage.getItem("selected_ar")
        ? (i18n.global.locale = localStorage.getItem("selected_ar"))
        : (i18n.global.locale = localStorage.getItem("selected_en"));
});
const statelang = (val) => {
    if (val == true) {
        localStorage.setItem("selected_en", "en");
        languages.value = "العربية";
        i18n.global.locale = localStorage.getItem("selected_en");
        localStorage.removeItem("selected_ar");
    } else if (val == false) {
        localStorage.setItem("selected_ar", "ar");
        languages.value = "English";

        i18n.global.locale = localStorage.getItem("selected_ar");
        localStorage.removeItem("selected_en");
    }
};
watch(check, (val) => {
    statelang(val);
});
const toggleLocale = () => {
    alert("toggle");
};
</script>
<template>
    <footer
        class="container flex items-center justify-between w-full py-10 text-sm font-medium text-gray-200"
    >
        <span> © Copyright {{ new Date().getFullYear() }} Muhandisin </span>
        <ul class="flex items-center gap-3 text-gray-200">
            <li>
                <a href="/terms" rel="noopener noreferrer" target="_blank">{{
                    $t("Register.conditions")
                }}</a>
            </li>
            <li>
                <a href="/privacy" rel="noopener noreferrer" target="_blank">{{
                    $t("Register.Privacy")
                }}</a>
            </li>
            <li>
                <button class="underline" @click="check = !check">
                    {{ languages }}
                </button>
            </li>
        </ul>
    </footer>
</template>
