"use client";

import { useState, useEffect } from "react";
import styles from "../vip.module.css";
import { LoginForm } from "./LoginForm";

type LoginBlockProps = {
  onVerify: (userId: string) => Promise<boolean>;
  onSuccess: () => void;
};

export function LoginBlock({ onVerify, onSuccess }: LoginBlockProps) {
  const [hash, setHash] = useState("");
  useEffect(() => {
    setHash(typeof window !== "undefined" ? window.location.hash : "");
  }, []);

  return (
    <section id="login" className={styles.section} style={{ paddingTop: "2rem" }}>
      <div className={styles.card} style={{ maxWidth: "400px", margin: "0 auto" }}>
        <h2 className={styles.sectionTitle}>已有账号登录</h2>
        <p className={styles.sectionDesc}>
          请输入您的会员账号（支付时使用的 user_id）以恢复权益
        </p>
        <LoginForm onVerify={onVerify} onSuccess={onSuccess} autoFocus={hash === "#login"} />
      </div>
    </section>
  );
}