import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";

import classes from "./classes.module.scss";

type IProps = {
	percentage: number;
};

type IState = {};

export default class OcrResult extends React.Component<IProps, IState> {
	public override render(): JSX.Element | null {
		return (
			<div className={classes["root"]}>
				<Typography typo={ITypo.P_16} className={classes["result-text"]}>
					Résultat de l'analyse :
				</Typography>
				<div className={classes["result-container"]}>
					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
						Document conforme à :&nbsp;
					</Typography>
					<div className={classes["percentage-container"]}>
						<Typography typo={ITypo.P_18} color={this.getColor()}>
							{this.props.percentage}%
						</Typography>
						<div className={classes["dot"]} data-color={this.getColor()} />
					</div>
				</div>
			</div>
		);
	}

	private getColor() {
		if (this.props.percentage > 75) {
			return ITypoColor.COLOR_SUCCESS_600;
		} else {
			return ITypoColor.COLOR_ERROR_600;
		}
	}
}