"use client";

import { Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
import { LoginForm } from "@/components/auth/login-form";

function LoginContent() {
  const router = useRouter();
  const params = useSearchParams();

  return (
    <AuthCard
      title="Welcome back"
      description="Log in to access your bookmarks, notes, and collections."
      footer={
        <AuthFooterLink prefix="No account?" href="/signup" label="Create one" />
      }
    >
      <LoginForm
        onSuccess={() => {
          router.push(params.get("next") ?? "/u/me");
          router.refresh();
        }}
      />
    </AuthCard>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={null}>
      <LoginContent />
    </Suspense>
  );
}