import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ValidationError } from "class-validator";
import Link from "next/link";
type IProps = {
	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
	validationErrors: ValidationError[];
};

export default function StepPassword(props: IProps) {
	const { onSubmit, validationErrors } = props;

	return (
		<div className={classes["root"]}>
			<Typography typo={ITypo.H1}>
				<div className={classes["title"]}>Entrez votre mot de passe</div>
			</Typography>
			<Form className={classes["form"]} onSubmit={onSubmit}>
				<TextField
					placeholder="Mot de passe"
					name="password"
					validationError={validationErrors.find((error) => error.property === "password")}
					password
				/>
				<Link href="/forgot-password">
					<Typography typo={ITypo.H1}>
						<div className={classes["forgot-password"]}>Mot de passe oublié ?</div>
					</Typography>
				</Link>
				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
					Valider
				</Button>
			</Form>
		</div>
	);
}