"use client";

import { useFormStatus } from "react-dom";
import { login } from "@/auth/actions";
import "./LoginForm.css";

function FormFields({ returnUrl }: { returnUrl: string }) {
  const { pending } = useFormStatus();

  return (
    <>
      <input
        type="text"
        name="loginHint"
        placeholder="your.bsky.handle"
        className="LoginForm-input"
        required
        autoFocus
        readOnly={pending}
      />
      <input type="hidden" name="returnUrl" value={returnUrl} />
      <button type="submit" className="LoginForm-button" disabled={pending}>
        {pending ? "signing in..." : "sign in with bluesky"}
      </button>
    </>
  );
}

export function LoginForm({ returnUrl }: { returnUrl: string }) {
  return (
    <form action={login} className="LoginForm">
      <FormFields returnUrl={returnUrl} />
    </form>
  );
}
