<script setup lang="ts">
  import LoginPart from '~/pages/login/components/LoginPart.vue';
  import RegisterPart from '~/pages/login/components/RegisterPart.vue';
  import ResetPart from '~/pages/login/components/ResetPart.vue';
  import { PageType } from '~/stores/login';

  const store = useLoginStore();
  const { currentType } = storeToRefs(store);
  // watch(currentType, (val) => {
  //   console.log(val);
  // });

  onMounted(() => {
    // useThemeStore().setTheme('test');
    // useThemeStore().setTheme('self');
  });
</script>

<template>
  <div
    class="flex justify-center items-center min-h-screen bg-[url('public/fll.jpg')] bg-cover bg-no-repeat bg-fixed bg-center"
  >
    <div
      class="flex flex-col items-center justify-center gap-4 w-3/5 md:w-4/5 max-w-2xl bg-loginBG pt-4 rounded-md bg-opacity-30 dark:bg-darkLoginBG dark:bg-opacity-40"
    >
      <h1 class="text-3xl font-bold">{{ store.getTypeName }}</h1>
      <LoginPart v-if="currentType === PageType.login" />
      <register-part v-else-if="currentType === PageType.register" />
      <reset-part v-else-if="currentType === PageType.reset" />
    </div>
  </div>
</template>