import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { white, geyser } from '@bufferapp/components/style/color';
import ErrorBoundary from '../ErrorBoundary';

const Container = styled.article`
  width: 100%;
  background: ${white};
  border: 1px solid ${geyser};
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(48, 71, 89, 0.05);
  margin: 0 0 16px;
  min-width: 1022px;

  &:after {
    clear: both;
    content: "";
    display: block;
  }
`;

const ChartCard = ({ children, hasError }) => (
  <Container data-chart>
    <ErrorBoundary hasError={hasError} >
      {children}
    </ErrorBoundary>
  </Container>
);

ChartCard.defaultProps = {
  hasError: false,
};

ChartCard.propTypes = {
  children: PropTypes.node.isRequired,
  hasError: PropTypes.node,
};

export default ChartCard;