import React from 'react';
import { Caption, Menu, Paragraph } from 'app/shared/components/text/text';
import cx from 'classnames';

export interface Props {
  date: string;
  earnings: string;
  fixed: string | null;
  isSelected: boolean;
}

export const DashboardChartTooltip = ({ date, earnings, fixed, isSelected }: Props) => {
  const fixedValueClassName = cx('u-font--clear-spacings', 'u-no-wrap', {
    'u-color--primary': !isSelected,
    'u-color--selected': isSelected,
  });

  return <div>
    <div className="u-margin-bottom">
      <Menu extraClass="u-font--clear-spacings u-no-wrap u-color--dark-grey">
        {date}
      </Menu>
    </div>
    <Paragraph extraClass="u-font--clear-spacings u-no-wrap">
      {earnings}
    </Paragraph>
    <Caption extraClass="u-font--clear-spacings u-no-wrap u-margin-top--small">
      Earnings
      <span className="u-color--dark-grey">
        {fixed !== null && ' | Forecast'}
      </span>
    </Caption>
    {fixed !== null && <div className="u-margin-top--small">
      <Caption extraClass={fixedValueClassName}>
        {fixed}
      </Caption>
    </div>}
  </div>;
};