import { LoginForm } from "@/features/auth/components/login-form";
import { LoginAuthRedirect } from "@/features/auth/components/login-auth-redirect";
import { ThemeToggle } from "@/components/theme-toggle";
import Image from "next/image";

export default function LoginPage() {
  return (
    <div className="relative flex min-h-full flex-1 items-center justify-center overflow-hidden px-4 py-10">
      <LoginAuthRedirect />
      <div className="pointer-events-none absolute -start-24 -top-24 size-64 rounded-full bg-info/10 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-24 -end-24 size-64 rounded-full bg-primary/10 blur-3xl" />

      <div className="absolute start-6 top-6 z-50">
        <ThemeToggle />
      </div>

      <div className="relative z-0 w-full max-w-md rounded-3xl bg-card p-8 shadow-soft sm:p-10">
        <div className="mb-8 flex justify-center">
          <div className="inline-flex size-14 items-center justify-center rounded-2xl bg-primary text-lg font-bold text-primary-foreground shadow-soft-sm">
            <Image
              src="/logo.png"
              alt="Next Goal"
              width={207}
              height={80}
              priority
              className="h-10 w-auto max-w-full object-contain object-start px-2"
            />
          </div>
        </div>
        <LoginForm />
      </div>
    </div>
  );
}