pipeline/frontend/app/(auth)/login/page.tsx

"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";

export default function LoginPage() {
  const {
    formData,
    isLoading,
    error,
    showPassword,
    handleInputChange,
    handleLogin,
    togglePasswordVisibility,
  } = useLogin();

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f4f5f7] p-4 dark:bg-background">
      <div className="w-full max-w-[380px] space-y-6">
        <LoginHeader />

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

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