import Link from 'next/link';

import { Providers, SignInMethodsContainer } from '@kit/auth/sign-in';
import { pathsConfig } from '@kit/shared/config';
import { Button } from '@kit/ui/button';
import { Heading } from '@kit/ui/heading';
import { Trans } from '@kit/ui/trans';

export default function PasswordOption({
  inviteToken,
  returnPath,
  providers,
}: {
  inviteToken?: string;
  returnPath?: string;
  providers: Providers;
}) {
  const signUpPath =
    pathsConfig.auth.signUp +
    (inviteToken ? `?invite_token=${inviteToken}` : '');

  const paths = {
    callback: pathsConfig.auth.callback,
    returnPath: returnPath ?? pathsConfig.app.home,
    joinTeam: pathsConfig.app.joinTeam,
    updateAccount: pathsConfig.auth.updateAccount,
  };

  return (
    <>
      <div className={'flex flex-col items-center gap-1'}>
        <Heading level={4} className={'tracking-tight'}>
          <Trans i18nKey={'auth:signInHeading'} />
        </Heading>

        <p className={'text-muted-foreground text-sm'}>
          <Trans i18nKey={'auth:signInSubheading'} />
        </p>
      </div>

      <SignInMethodsContainer
        inviteToken={inviteToken}
        paths={paths}
        providers={providers}
      />

      <div className={'flex justify-center'}>
        <Button asChild variant={'link'} size={'sm'}>
          <Link href={signUpPath} prefetch={true}>
            <Trans i18nKey={'auth:doNotHaveAccountYet'} />
          </Link>
        </Button>
      </div>
    </>
  );
}