import React from 'react';
import Text from '@bufferapp/ui/Text';
import { Info } from '@bufferapp/ui/Icon';
import { grayDark } from '@bufferapp/ui/style/colors';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Helper } from '../Helper';

const Container = styled.div`
  margin: 0 16px 0 0;

  label {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    svg {
      padding: 0 6px 0 0;
      width: 12px;
      height: 12px;
      color: ${grayDark};
    }
  }
`;

const ChartHelper = ({ text }) => (
  <Container>
    <Helper text={text}>
      <Text type="label" color="grayDark"><Info /> How is this calculated?</Text>
    </Helper>
  </Container>
);

ChartHelper.propTypes = {
  text: PropTypes.string.isRequired,
};

export default ChartHelper;