import numeral from 'numeral';
import React, { Component } from 'react';

class ProgressBar extends Component {
  /** */
  render() {
    let { booked, budget } = this.props;

    let barWidth = 100;
    if(booked < budget) {
      barWidth = (booked / budget) * 100;
    }

    return (
      <div className="budgetValuesWrapper">
        <h3 className="budgetBookedTitle">Totaal budget uitgegeven</h3>
        <p className="budgetValues">
          <span className="booked">{numeral(booked).format('$ 0,000')}</span>
          <span className="van"> van </span>
          <span className="budget">{numeral(budget).format('$ 0,000')}</span>
        </p>
        <div className="outerBar">
          <div className="innerBar">
            <div className="coloredBar" style={{width: `${barWidth}%`}}></div>
          </div>
        </div>
      </div>);
  }
}

ProgressBar.propTypes = {
  booked: React.PropTypes.number.isRequired,
  budget: React.PropTypes.number.isRequired,
};

export default ProgressBar;