import { FC } from "react";
import ProgressBar from 'react-bootstrap/ProgressBar'
interface ProgressBarProps {
    label?: String;
    unit?: String;
    current: number;
    target: number;
}
const ProgressBarComponent: FC<ProgressBarProps> = ({ unit, label, current, target }) => {
    return (
        <>
            <div className="container">
                <div>
                    <span className="measure">
                        {label}
                    </span>
                </div>
                <div className="container obj">
                    <span className="progress-bar-current-value">
                        {current}
                    </span>
                    <span className="progress-bar-target-value" >
                        {'/ '}{target}{' ' + unit}
                    </span> 
                </div>
            </div>
            <ProgressBar variant="gray" now={current} max={target} />

        </>
    )
}
export default ProgressBarComponent