import React from 'react';
import './scss/percentageBar.scss';

export default class PercentageBar extends React.Component {
  static defaultProps = {
    percent: 1,
    title: null,
    color: '',
    barStyle: {},
    justifyContent: 'flex-start',
  }

  render() {
    const {
      percent, title, color, barStyle, justifyContent,
    } = this.props;
    const style = {
      width: `${percent}%`,
      backgroundColor: color,
      ...barStyle,
    };

    return <div
      className='omni-ui-general omni-percentage-bar'
      style={{ justifyContent }}
    >
      <div className='omni-percentage-bar__bar' style={style}>
        {title && <div className='omni-percentage-bar__title'>{title}</div>}
      </div>
    </div>;
  }
}