import Link from "next/link";
import { LoginForm } from "./LoginForm";
import "./login.css";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; returnUrl?: string }>;
}) {
  const params = await searchParams;
  const error = params.error
  const returnUrl = params.returnUrl && params.returnUrl.startsWith('/') ? params.returnUrl : '/';

  return (
    <div className="LoginPage">
      <div className="LoginPage-card">
        <h1 className="LoginPage-title">
          <Link href="/">sidetrail</Link>
        </h1>
        <p className="LoginPage-subtitle">trails worth walking</p>

        {error && <p className="LoginPage-error">{error}</p>}

        <LoginForm returnUrl={returnUrl} />
      </div>
    </div>
  );
}
