"use client";

import { useRegister } from "@/hooks/useRegister";
import { LoginHeader } from "@/components/auth/LoginHeader";
import { RegisterForm } from "@/components/auth/RegisterForm";
import { LoginFooter } from "@/components/auth/LoginFooter";

/**
 * 회원가입 페이지 컴포넌트
 * 비즈니스 로직은 useRegister 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
 */
export default function RegisterPage() {
  const {
    formData,
    isLoading,
    error,
    validationErrors,
    showPassword,
    showPasswordConfirm,
    isFormValid,
    handleInputChange,
    handleRegister,
    togglePasswordVisibility,
    togglePasswordConfirmVisibility,
  } = useRegister();

  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
      <div className="w-full max-w-md space-y-8">
        <LoginHeader />

        <RegisterForm
          formData={formData}
          isLoading={isLoading}
          error={error}
          validationErrors={validationErrors}
          showPassword={showPassword}
          showPasswordConfirm={showPasswordConfirm}
          isFormValid={isFormValid}
          onInputChange={handleInputChange}
          onSubmit={handleRegister}
          onTogglePassword={togglePasswordVisibility}
          onTogglePasswordConfirm={togglePasswordConfirmVisibility}
        />

        <LoginFooter showRegisterLink={false} />
      </div>
    </div>
  );
}