import { useTranslations } from 'next-intl'
import LogoIcon from '@/app/ui/logo-icon';
import styles from '@/app/styles/login.module.scss';
import Link from 'next/link';
import RegisterForm from '@/app/ui/forms/register-form';
import LanguageSwitcher from '@/app/components/LanguageSwitcher';
import ForgotPasswordForm from '@/app/ui/forms/forgot-password-form';

export default function Page() {
	const t = useTranslations('Login-register-form');

	return (
		<div className={`${styles['login-container-wrapper']}`}>
			<div className={`${styles['login-container-language']}`}>
				<LanguageSwitcher />
			</div>
			<div className={`${styles['login-container']}`}>
				<div className={`${styles['logo']}`}>
					<LogoIcon />
					<h1>NO COPY</h1>
					<p>
						{t('recover-password')}
					</p>
				</div>

				<ForgotPasswordForm/>

				<div className={`${styles['register-link']}`}>
					<p>{t('already-have-an-account')}? <Link href="login">{t('login')}</Link></p>
				</div>
				<div className={`${styles['register-link']}`}>
					<p>{t('no-account')}?
						<Link href="register"> {t('register')}</Link>
					</p>
				</div>
			</div>
		</div>
	)
}