Check your email

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuMail, LuMailOpen } from "react-icons/lu";
import { Button, EmptyState, Input } from "@nexera-ui/react";

/** Check your email: a magic sign-in link was sent, with resend and change-email actions. */
export default function CheckYourEmail() {
  const [email, setEmail] = useState("ayesha.khan@northwind.io");
  const [draft, setDraft] = useState(email);
  const [isEditing, setIsEditing] = useState(false);
  const [notice, setNotice] = useState("");

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setEmail(draft);
    setIsEditing(false);
    setNotice(`New link sent to ${draft}.`); // replace with your magic-link request
  };

  return (
    <div className="@container grid min-h-[520px] place-items-center bg-page px-4 py-10">
      <div className="grid w-full max-w-md gap-6 rounded-xl border border-default bg-surface p-6 shadow-sm @sm:p-8">
        {isEditing ? (
          <form className="grid gap-4" onSubmit={onSubmit}>
            <header className="grid gap-1">
              <h2 className="text-heading-h3 text-primary">Change email</h2>
              <p className="text-body-default text-secondary">
                We&apos;ll send a new sign-in link to this address.
              </p>
            </header>
            <Input
              label="Work email"
              type="email"
              name="email"
              autoComplete="email"
              leadingIcon={<LuMail />}
              value={draft}
              onChange={setDraft}
              isRequired
            />
            <div className="flex flex-wrap justify-end gap-2">
              <Button
                variant="secondary"
                size="md"
                onPress={() => {
                  setIsEditing(false);
                }}
              >
                Cancel
              </Button>
              <Button type="submit" size="md">
                Send link
              </Button>
            </div>
          </form>
        ) : (
          <EmptyState
            size="md"
            headingLevel={2}
            icon={<LuMailOpen />}
            title="Check your email"
            description={`We sent a sign-in link to ${email}. Open it on this device; it expires in 15 minutes.`}
            secondaryAction={
              <Button
                variant="secondary"
                size="sm"
                onPress={() => {
                  setDraft(email);
                  setIsEditing(true);
                }}
              >
                Change email
              </Button>
            }
            primaryAction={
              <Button
                size="sm"
                onPress={() => {
                  setNotice(`We sent another link to ${email}. Only the newest one works.`);
                }}
              >
                Resend link
              </Button>
            }
          />
        )}
        <p
          role="status"
          className="text-center text-body-small text-status-success-fg empty:hidden"
        >
          {notice}
        </p>
        <p className="border-t border-subtle pt-4 text-center text-body-small text-secondary">
          Nothing after a few minutes? Check your spam folder for mail from no-reply@northwind.io,
          or{" "}
          <a href="#sign-in" className="text-brand-text underline underline-offset-4">
            sign in with a password
          </a>
          .
        </p>
      </div>
    </div>
  );
}