import { loginAction } from "../actions";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; next?: string }>;
}) {
  const { error, next } = await searchParams;

  return (
    <div className="rb-admin-login">
      <form className="rb-admin-card rb-login-card" action={loginAction}>
        <h1 className="rb-admin-h1">RetroBlog Admin</h1>
        <p className="rb-admin-muted">Sign in to manage posts and settings.</p>

        {error && (
          <p className="rb-admin-error">Incorrect password. Try again.</p>
        )}

        <label className="rb-field">
          <span>Password</span>
          <input
            type="password"
            name="password"
            autoFocus
            autoComplete="current-password"
          />
        </label>

        {next && <input type="hidden" name="next" value={next} />}

        <button className="rb-btn rb-btn-primary" type="submit">
          Sign in
        </button>
      </form>
    </div>
  );
}