<template>
  <div class="auth-page">
    <div class="auth-box">
      <component :is="componentMap[currentComponent]" @switch="handleSwitch" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Login from './components/login.vue'
import Register from './components/register.vue'

type AuthComponent = 'login' | 'register' | 'forgot'

const currentComponent = ref<AuthComponent>('login')

const componentMap: Record<AuthComponent, typeof Login | typeof Register> = {
  login: Login,
  register: Register,
  forgot: Login // 暂时用 Login 代替，后续可添加 ForgotPassword 组件
}

function handleSwitch(component: AuthComponent) {
  currentComponent.value = component
}
</script>

<style scoped lang="scss">
.auth-page {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/auth-bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: end;

  .auth-box {
    width: 40%;
    height: 100%;
    background: rgba(6, 5, 25, 0.80);
    backdrop-filter: blur(40px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
