"use client";

import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { TwoFactorForm } from "@/components/auth/two-factor-form";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ShieldCheck } from "lucide-react";

function TwoFactorContent() {
  const searchParams = useSearchParams();
  const callbackURL = searchParams.get("callbackURL") || "/";

  return (
    <Card className="border-0 shadow-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur">
      <CardHeader className="space-y-1 text-center">
        <div className="flex justify-center mb-4">
          <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
            <ShieldCheck className="h-6 w-6 text-white" />
          </div>
        </div>
        <CardTitle className="text-2xl font-bold">Two-Factor Authentication</CardTitle>
        <CardDescription>
          Enter the 6-digit code from your authenticator app
        </CardDescription>
      </CardHeader>
      <CardContent>
        <TwoFactorForm callbackURL={callbackURL} />
      </CardContent>
    </Card>
  );
}

export default function TwoFactorPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TwoFactorContent />
    </Suspense>
  );
}