import Link from "next/link";
import { AuthForm } from "@/components/auth-form";
import { registerAction } from "@/app/actions/auth";
import { PROFILE_TYPES } from "@/lib/roles";

export default function RegisterPage() {
  return (
    <div className="auth-gate auth-gate--join">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img className="auth-gate__photo" src="/media/lots/spinel.jpg" alt="" />
      <div className="auth-gate__desk">
        <p className="auth-gate__brand">ELBEEGEMS</p>
        <h1>Join the floor</h1>
        <p className="auth-gate__lede">
          Register as a member. Verification and wholesale are approved by ElbeeGems — never automatic.
        </p>
        <AuthForm action={registerAction} submitLabel="Join the floor" types={PROFILE_TYPES} />
        <p className="auth-gate__alt">
          Already a member? <Link href="/login">Sign in</Link>
        </p>
      </div>
    </div>
  );
}