import { useState } from "react";
import { WindowControls } from "@/components/window-controls";
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 h-screen flex-col">
      <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
        <WindowControls />
      </div>
      <div className="flex flex-1 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>
    </div>
  );
}
