import React from 'react';
import PropTypes from 'prop-types';

import Card from '@propellerads/card';
import {
  Question,
  COLOR,
  SIZE,
} from '@propellerads/icon';
import {showTooltip, hideTooltip, TOOLTIP_POSITION} from '@propellerads/smart-tooltip';

import {
  StyledHeader,
  StyledHeaderTitle,
  StyledBody,
  StyledLoader,
} from './style';

const MoneyDashboard = ({
  title,
  tooltip,
  value,
  isLoading,
}) => (
  <Card>
    <StyledHeader>
      <StyledHeaderTitle>{title}</StyledHeaderTitle>
      {tooltip && (
        <div
          onMouseEnter={(e) => {
            showTooltip(e.target, tooltip, TOOLTIP_POSITION.RIGHT);
          }}
          onMouseLeave={hideTooltip}
        >
          <Question
            size={SIZE.SMALL}
            color={COLOR.GRAY_DARK}
          />
        </div>
      )}
    </StyledHeader>
    <StyledBody>
      <StyledLoader isLoading={isLoading} />
      {!isLoading && value}
    </StyledBody>
  </Card>
);

MoneyDashboard.propTypes = {
  title: PropTypes.element.isRequired,
  tooltip: PropTypes.element,
  value: PropTypes.element.isRequired,
  isLoading: PropTypes.bool,
};

MoneyDashboard.defaultProps = {
  tooltip: null,
  isLoading: false,
};

export default MoneyDashboard;