'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import useUserStore from '@/app/store/userStore'
import ClientRegistrationForm from './components/ClientRegistrationForm'
import Loader from '@/components/ui/Loader'

const RegisterPage = () => {
  const router = useRouter()
  const { isAuthenticated } = useUserStore()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // проверяем логин
    if (isAuthenticated) {
      // распределяем
      router.replace('/account')
      return
    }

    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 300)

    return () => clearTimeout(timer)
  }, [isAuthenticated, router])

  if (isLoading) {
    return <Loader />
  }
  return (
    <div className="flex items-center justify-center p-12">
      <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl bg-white p-6 shadow-lg md:max-w-3xl lg:max-w-3xl">
        <h1 className="py-1 text-2xl">Давайте познакомимся поближе!</h1>

        <ClientRegistrationForm />

        <p className="text-center">
          Уже есть аккаунт?{' '}
          <span className="text-orange/60 hover:underline">
            <Link href="/login">Войти</Link>
          </span>
        </p>
      </div>
    </div>
  )
}

export default RegisterPage