import { Building2, Fingerprint } from "lucide-react"
import { useState } from "react"
import { SignInForm } from "@/components/ui/sign-in-form"

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const providers = [
  { id: "passkey", label: "a passkey", icon: <Fingerprint aria-hidden="true" />, onClick: () => undefined },
  { id: "sso", label: "SSO", icon: <Building2 aria-hidden="true" />, onClick: () => undefined },
];

export function SignInFormDemo() {
  const [, setView] = useState<"in" | "up">("in");
  const [, setDone] = useState<string | null>(null);
  return (
    <SignInForm
                  description="Welcome back. Enter your details to continue."
                  providers={providers}
                  onForgot={() => undefined}
                  signUp={{ onClick: () => setView("up") }}
                  onSubmit={async ({ email }) => {
                    await wait(900);
                    if (email === "locked@example.com") throw new Error("This account is locked. Ask an admin to unlock it.");
                    if (email === "taken@example.com") return { fields: { password: "That password is not right. Try again or reset it." } };
                    setDone("You are signed in");
                  }}
                />
  );
}