"use client";

import { signIn } from "next-auth/react"
import { useTranslations } from "next-intl";
import Image from "next/image";

const providerLogo = (provider: {id:string, name:string}) => {
    switch(provider.id) {
        case "google": return "https://authjs.dev/img/providers/google.svg";
        case "facebook": return "https://authjs.dev/img/providers/facebook.svg";
        case "github": return "https://authjs.dev/img/providers/github.svg";
        case "twitter": return "https://authjs.dev/img/providers/twitter.svg";
        case "email": return "https://authjs.dev/img/providers/email.svg";
        case "linkedin": return "https://authjs.dev/img/providers/linkedin.svg";
        default: return "https://authjs.dev/img/providers/google.svg";
    }
}

export const SignInButton:React.FC<{ provider: {id:string, name:string} }> = ({ provider }) => {

  const t = useTranslations("login-page");

    return(
        <button className="btn btn-neutral m-1" onClick={() => signIn(provider.id, { callbackUrl:"https://rezije.app/" }) }>
            <Image alt="Provider Logo" loading="lazy" height="24" width="24" id="provider-logo-dark" src={providerLogo(provider)} />
            <span>
                {t("sign-in-button")} {provider.name}</span>
        </button>
    );
}