"use client";

import { useLogin } from "@/hooks/useLogin";
import { LoginHeader } from "@/components/auth/LoginHeader";
import { LoginForm } from "@/components/auth/LoginForm";
import { LoginFooter } from "@/components/auth/LoginFooter";

/**
 * 로그인 페이지 컴포넌트
 * 비즈니스 로직은 useLogin 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
 */
export default function LoginPage() {
  const { formData, isLoading, error, showPassword, handleInputChange, handleLogin, togglePasswordVisibility } =
    useLogin();

  return (
    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-background to-muted p-4">
      {/* 배경 장식 원 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-primary/5" />
        <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary/5" />
      </div>

      <div className="relative w-full max-w-md space-y-8">
        <LoginHeader />

        <LoginForm
          formData={formData}
          isLoading={isLoading}
          error={error}
          showPassword={showPassword}
          onInputChange={handleInputChange}
          onSubmit={handleLogin}
          onTogglePassword={togglePasswordVisibility}
        />

        <LoginFooter />
      </div>
    </div>
  );
}
