import React from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
var Container = styled("div")({});
var Stat = styled("div")({
  display: "inline-flex",
  flexDirection: "column",
  margin: 8
});
var Label = styled("div")({
  fontSize: 14,
  fontWeight: "bold",
  color: colors.grey[700]
});
var Value = styled("div")({
  fontSize: 32,
  marginTop: 8
});
export default (function (_ref) {
  var stats = _ref.stats;
  return /*#__PURE__*/React.createElement(Container, null, stats.map(function (s) {
    return /*#__PURE__*/React.createElement(Stat, {
      key: s.name
    }, /*#__PURE__*/React.createElement(Label, null, s.name), /*#__PURE__*/React.createElement(Value, null, s.value));
  }));
});