import { useActionData, useLoaderData, Form } from "remix";

// Re-export magic auth action/loader for this route's action/loader
export {
  signInAction as action,
  signInLoader as loader,
} from "~/util/magic-auth";

// Build your UI, just have to post to "/auth"
export default function Login() {
  let actionData = useActionData();
  let loaderData = useLoaderData();

  if (actionData === "ok") {
    return <h1>Check your email!</h1>;
  }

  return (
    <Form method="post" action="/auth">
      <input type="hidden" name="landingPage" value={loaderData.landingPage} />
      <p>
        <label>
          Email:{" "}
          <input
            type="email"
            name="email"
            placeholder="you@example.com"
          />
        </label>{" "}
        <button type="submit">Sign in</button>
      </p>
    </Form>
  );
}