import { Center, Loader } from "@mantine/core";
import PhonePrompt from "./phone-prompt";
import CodePrompt from "./code-prompt";
import { useSearch } from "@tanstack/react-router";
import PlayerPrompt from "./player-prompt";

const LoginFlow = () => {
  const { stage } = useSearch({ from: '/login' });

  if (!stage) {
    return <PhonePrompt />;
  } else if (stage === 'code') {
    return <CodePrompt />;
  } else if (stage === 'name') {
    return <PlayerPrompt />;
  }

  return <Center>
    <Loader size="xl" type="dots" />
  </Center>;
};

export default LoginFlow;
