import { useState } from "react";
import { EmailStep } from "./email-step";
import { CodeStep } from "./code-step";

type Step = "email" | "code";

export function LoginPage() {
  const [step, setStep] = useState<Step>("email");
  const [email, setEmail] = useState("");

  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <div className="w-full max-w-sm">
        {step === "email" ? (
          <EmailStep
            onCodeSent={(submittedEmail) => {
              setEmail(submittedEmail);
              setStep("code");
            }}
          />
        ) : (
          <CodeStep
            email={email}
            onBack={() => setStep("email")}
          />
        )}
      </div>
    </div>
  );
}
