import { observer } from "mobx-react";
// components
import { GithubOAuthButton, GoogleOAuthButton } from "@/components/account";
// hooks
import { useInstance } from "@/hooks/store";

type TOAuthOptionProps = {
  isSignUp?: boolean;
};

export const OAuthOptions: React.FC<TOAuthOptionProps> = observer(() => {
  // hooks
  const { config } = useInstance();

  const isOAuthEnabled = (config && (config?.is_google_enabled || config?.is_github_enabled)) || false;

  if (!isOAuthEnabled) return null;

  return (
    <>
      <div className="mt-4 flex items-center">
        <hr className="w-full border-onboarding-border-100" />
        <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
        <hr className="w-full border-onboarding-border-100" />
      </div>
      <div className={`mt-7 grid gap-4 overflow-hidden`}>
        {config?.is_google_enabled && (
          <div className="flex h-[42px] items-center !overflow-hidden">
            <GoogleOAuthButton text="Continue with Google" />
          </div>
        )}
        {config?.is_github_enabled && <GithubOAuthButton text="Continue with Github" />}
      </div>
    </>
  );
});