import { connect } from 'react-redux';
import { Loader } from 'UI';
import { CountBadge, Divider, widgetHOC } from './common';

@widgetHOC('pageMetrics')
export default class PageMetrics extends React.PureComponent {
  render() {
    const { data, loading } = this.props;
    return (
      <div className="flex-1 flex-shrink-0  flex justify-around items-center">
        <Loader loading={ loading } size="small">
          <CountBadge
            title="Avg. Dom Load Time"
            unit="ms"
            icon="file"
            count={ data.avgLoad }
            change={ data.avgLoadProgress }
            oppositeColors
          />
          <Divider />
          <CountBadge
            title="Avg. First Meaningful Paint"
            unit="ms"
            icon="file"
            count={ data.avgFirstContentfulPixel }
            change={ data.avgFirstContentfulPixelProgress }
            oppositeColors
          />
        </Loader>
      </div>
    );
  }
}