import { FC } from 'react';

import { SignInButton } from '@/app/ui/SignInButton';
import Image from 'next/image';
import { getTranslations } from "next-intl/server";
import Link from 'next/link';
import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
import { AuthProvider } from '../lib/getProviders';

export const EnterOrSignInButton: FC<{ session: any, locale: string, providers: AuthProvider[] }> = async ({ session, locale, providers }) => {
  const paragraphFormat = paragraphFormatFactory(locale);

  const t = await getTranslations("login-page");

  return (
    <>
      {
        session ? (
          <span className="flex justify-center mt-4">

            <Link
              href={`/${locale}/home`}
              className="btn btn-neutral btn-lg"
            >
              <Image src="/icon2.png" alt="logo" width={32} height={32} />
              {t("main-card.go-to-app")}
            </Link>
          </span>

        ) : (
          <>
            <span className="flex justify-center mt-4">

              {
                Object.values(providers).map((provider) => (
                  <div key={provider.name}>
                    <SignInButton provider={provider} />
                  </div>
                ))
              }
            </span>
            {t.rich("disclaimer", paragraphFormat)}
          </>
        )
      }

    </>);
};