type LoginFormState = {
  status: "idle" | "submitting" | "error";
  message?: string;
};

const state: LoginFormState = {
  status: "error",
  message: "Email atau password belum sesuai. Coba periksa kembali.",
};

export default function LoginForm() {
  const isSubmitting = state.status === "submitting";

  return (
    <form aria-describedby={state.message ? "login-error" : undefined}>
      <h1>Masuk ke akun</h1>

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" autoComplete="email" />

      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        autoComplete="current-password"
      />

      {state.message ? (
        <p id="login-error" role="alert">
          {state.message}
        </p>
      ) : null}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Memeriksa akun..." : "Masuk"}
      </button>
    </form>
  );
}