/**
 * Component for render progress
 *
 * @author Brauer Ilya
 * @date 2022-08-16
 */

import * as React from 'react';
import * as styles from './progress.m.scss';
import {joinClassNames} from '../../utils/joinClassNames';

interface IProps {
    percent: number;
}

export class Progress extends React.Component<IProps> {

    override render () {
        const {percent} = this.props;

        return (
            <div className={styles.container}>
                <div className={styles.line}>
                    <div
                        className={joinClassNames(styles.item, styles.progress)}
                        style={{width: `${percent}%`}}
                    />
                    <div
                        className={joinClassNames(styles.item, styles.background)}
                        style={{width: `${100 - percent}%`}}
                    />
                </div>
                <div
                    className={styles.counts}
                >
                    {percent}%
                </div>
            </div>
        );
    }
}