import Link from "next/link";
import { AuthForm } from "@/components/auth-form";
import { loginAction } from "@/app/actions/auth";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ next?: string }>;
}) {
  const { next } = await searchParams;
  return (
    <div className="auth-gate">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img className="auth-gate__photo" src="/media/lots/sapphire.jpg" alt="" />
      <div className="auth-gate__desk">
        <p className="auth-gate__brand">ELBEEGEMS</p>
        <h1>Sign in to the floor</h1>
        <p className="auth-gate__lede">Deal, bid, and source as a member. Guests can look; rooms stay private.</p>
        <AuthForm action={loginAction} submitLabel="Sign in" next={next || "/"} />
        <p className="auth-gate__alt">
          New here? <Link href="/register">Join the floor</Link>
        </p>
      </div>
    </div>
  );
}