import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { signIn, useSession } from "../lib/auth-client";

const LoginPage = () => {
  const { data: session, isPending } = useSession();
  const navigate = useNavigate();

  if (isPending) return <div className="p-4">Loading...</div>;

  if (session) {
    navigate({ to: "/" });
    return null;
  }

  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <h1 className="text-2xl font-bold">sign in to lila</h1>
      <button
        className="w-64 rounded bg-gray-800 px-4 py-2 text-white hover:bg-gray-700"
        onClick={() =>
          signIn.social({
            provider: "github",
            callbackURL: window.location.origin,
          })
        }
      >
        Continue with GitHub
      </button>
      <button
        className="w-64 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
        onClick={() =>
          signIn.social({
            provider: "google",
            callbackURL: window.location.origin,
          })
        }
      >
        Continue with Google
      </button>
    </div>
  );
};

export const Route = createFileRoute("/login")({ component: LoginPage });