"use client";

import axios from "axios";
import { useEffect, useState } from "react";

export default function MagicLogin() {
  const [error, setError] = useState(false);
  const [userId, setUserId] = useState<string | null>(null);
  const [secret, setSecret] = useState<string | null>(null);

  useEffect(() => {
    if(typeof window !== "undefined") {
      const searchParams = new URLSearchParams(window.location.search);
      setUserId(searchParams.get("userId") as string);
      setSecret(searchParams.get("secret") as string);
      try {
        if(userId && secret){
          axios.post("/api/session", { userId, secret });
        }
      } catch (err) {
        setError(true);
      }
    }
  });

  if (error) {
    return (
      <div className="h-svh w-full flex justify-center items-center flex-col">
        <p className="text-center text-red-500">
          Something went wrong, try again later
        </p>
      </div>
    );
  } else {
    return (
      <div className="h-svh w-full flex justify-center items-center flex-col">
        <div className="m-auto my-2 rounded-full h-10 w-10 border-t-4 border-white/50 animate-spin"></div>
        <p className="text-xl text-center">Redirecting ...</p>
      </div>
    );
  }
}

"use client";

import dynamic from "next/dynamic";

export default function MagicLogin() {
  const MagicComponent = dynamic(() => import("./MagicLogin"), {
    ssr: false,
  })

  return(
    <>
      <MagicComponent />
    </>
  )
}