import React from "react";
import ProgressBar from "./ProgressBar";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";

type IProps = {
	currentNumber: number;
	total: number;
	title: string;
};
export default class QuantityProgressBar extends React.Component<IProps> {
	public override render(): JSX.Element {
		let numerator: number = this.props.currentNumber;
		if (this.props.currentNumber > this.props.total) {
			numerator = this.props.total;
		}

		const percentage = (numerator / this.props.total) * 100;
		return (
			<div className={classes["root"]}>
				<div className={classes["title"]}>
					<Typography typo={ITypo.P_16}>{this.props.title}</Typography>
				</div>
				<ProgressBar percentage={percentage} />
			</div>
		);
	}
}