import type { ReactNode } from 'react';

import { LoginBrandPanel } from './LoginBrandPanel';
import { LoginFormCard } from './LoginFormCard';
import { useLoginForm } from './use-login-form';

export default function LoginPage(): ReactNode {
  const { account, password, submitting, setAccount, setPassword, handleSubmit } = useLoginForm();

  return (
    <main className="lx-login">
      <LoginBrandPanel />
      <section className="lx-login__panel">
        <LoginFormCard
          account={account}
          password={password}
          submitting={submitting}
          onAccountChange={setAccount}
          onPasswordChange={setPassword}
          onSubmit={(event) => {
            void handleSubmit(event);
          }}
        />
      </section>
      <footer className="lx-login__footer">
        <span>© 2026 灵犀 · 内部系统</span>
        <span className="lx-login__footer-links">
          <span>隐私政策</span>
          <span>服务条款</span>
          <span>华东一区</span>
        </span>
      </footer>
    </main>
  );
}