"use client";
import { Loading } from "@/components/ui/loading";
import { IconGitHub, IconGoogle } from "@/components/ui/icons";
import { toast } from "@/components/ui/toaster";
import { useSignIn } from "@clerk/nextjs";
import type { OAuthStrategy } from "@clerk/types";
import * as React from "react";
import { OAuthButton } from "../oauth-button";

//type OAuthStrategy = 'oauth_google' | 'oauth_github';

export function OAuthSignIn() {
  // const [isLoading, setIsLoading] = React.useState<OAuthStrategy | null>(null);
  // const { signIn, isLoaded: signInLoaded } = useSignIn();

  // const oauthSignIn = async (provider: OAuthStrategy) => {
  //   if (!signInLoaded) {
  //     return null;
  //   }
  //   try {
  //     setIsLoading(provider);
  //     await signIn.authenticateWithRedirect({
  //       strategy: provider,
  //       redirectUrl: "/auth/sso-callback",
  //       redirectUrlComplete: "/app/apis",
  //     });
  //   } catch (err) {
  //     console.error(err);
  //     setIsLoading(null);
  //     toast.error((err as Error).message);
  //   }
  // };

  return (
    <div className="flex flex-col gap-2">
      {/* <OAuthButton onClick={() => oauthSignIn("oauth_github")}>
        {isLoading === "oauth_github" ? (
          <Loading className="w-6 h-6" />
        ) : (
          <IconGitHub className="w-6 h-6" />
        )}
        GitHub
      </OAuthButton>
      <OAuthButton onClick={() => oauthSignIn("oauth_google")}>
        {isLoading === "oauth_google" ? (
          <Loading className="w-6 h-6" />
        ) : (
          <IconGoogle className="w-6 h-6" />
        )}
        Google
      </OAuthButton> */}
    </div>
  );
}