"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>
  // );
}
