import Link from "next/link";
import { UserAuthForm } from "@/components/auth/UserAuthForm";
import { userRegisterAction } from "@/lib/actions/user-auth";

export const metadata = {
  title: "註冊帳號",
};

interface RegisterPageProps {
  searchParams: Promise<{ next?: string }>;
}

export default async function RegisterPage({ searchParams }: RegisterPageProps) {
  const { next } = await searchParams;

  return (
    <div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
      <div className="w-full max-w-sm space-y-6 rounded-2xl border border-border bg-card p-8">
        <div className="text-center">
          <h1 className="text-2xl font-bold">註冊帳號</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            建立帳號，開始探索會員專屬夜遊情報
          </p>
        </div>
        <UserAuthForm mode="register" action={userRegisterAction} next={next || "/account"} />
        <p className="text-center text-sm text-muted-foreground">
          已有帳號？{" "}
          <Link href={`/login${next ? `?next=${next}` : ""}`} className="text-primary hover:underline">
            登入
          </Link>
        </p>
      </div>
    </div>
  );
}