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

export const metadata = {
  title: "會員登入",
};

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

export default async function LoginPage({ searchParams }: LoginPageProps) {
  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="login" action={userLoginAction} next={next || "/account"} />
        <p className="text-center text-sm text-muted-foreground">
          還沒有帳號？{" "}
          <Link href={`/register${next ? `?next=${next}` : ""}`} className="text-primary hover:underline">
            立即註冊
          </Link>
        </p>
      </div>
    </div>
  );
}