

import React, { PropTypes } from 'react';
import Component from '../../Component';
import { states } from '../../propTypes';
import MODULE from './module';

export default class Bar extends Component {
  static module = MODULE;

  static propTypes = {
    children: PropTypes.node,
    percent: PropTypes.number.isRequired,
    state: states,
  };

  render() {
    const { children, state, percent } = this.props;

    return (
      <div
        className={this.formatChildClass('bar', {
          [`is-${state}`]: state,
        })}
        style={{ width: `${percent}%` }}
      >
        {children || `${percent}%`}
      </div>
    );
  }
}
