<template>
  <div
    class="min-h-[calc(100dvh-4em)] flex items-center justify-center p-4 bg-gray-100 dark:bg-dark-primary"
  >
    <div
      class="max-w-md w-full bg-white dark:bg-dark-primary-800 rounded-2xl shadow-xl p-8 text-center border border-gray-200 dark:border-dark-primary-600"
    >
      <!-- Tabs -->
      <ul class="flex border-b border-gray-200">
        <li class="flex-1">
          <button
            class="w-full py-3.5 font-medium transition-all duration-200 cursor-pointer"
            :class="tabClass('login')"
            @click="setActive('login')"
          >
            ورود
          </button>
        </li>
        <li class="flex-1">
          <button
            class="w-full py-3.5 font-medium transition-all duration-200 cursor-pointer"
            :class="tabClass('register')"
            @click="setActive('register')"
          >
            ثبت‌نام
          </button>
        </li>
      </ul>

      <!-- Content -->
      <div class="mt-8">
        <component :is="currentComponent" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
definePageMeta({ layout: "login-layout" });

// --- Lazy load components ---
import LoginForm from "~/components/lazy-load/auth/LoginForm.vue";
import RegisterForm from "~/components/lazy-load/auth/RegisterForm.vue";

// --- State ---
const activeTab = ref("login");
const currentComponent = ref(LoginForm);
const componentsMap = {
  login: LoginForm,
  register: RegisterForm,
};

// --- Methods ---
function setActive(tab) {
  activeTab.value = tab;
  currentComponent.value = componentsMap[tab];
}

// --- Compute class for tabs ---
function tabClass(tab) {
  if (activeTab.value === tab) {
    return "text-primary border-b-1 border-primary font-semibold";
  } else {
    return "text-gray-500 hover:text-primary";
  }
}
</script>
<style></style>
