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

export interface Props {
  title: string;
  tce: string;
  mode?: string;
  benchmark?: string;
}

export const TceChartTooltip = ({ tce, title, benchmark, mode }: Props) => {
  return (
    <div>
      <div className="u-margin-bottom--medium">
        <Menu extraClass="u-font--clear-spacings u-color--dark-grey">
          {title}
        </Menu>
      </div>
      <div className="u-margin-bottom--small">
        <Dot color="primary">
          <Paragraph extraClass='o-layout__item u-font--clear-spacings'>
            {tce}
          </Paragraph>
        </Dot>
      </div>
      <div className="c-tce-chart-tooltip__label">
        <Caption extraClass="u-font--clear-spacings">
          Pay out
        </Caption>
      </div>
      {benchmark && <div className="u-margin-top">
        <div className="u-margin-bottom--small">
          <Dot color='primary-dark'>
            <Paragraph extraClass='o-layout__item u-font--clear-spacings'>
              {benchmark}
            </Paragraph>
          </Dot>
        </div>
        <div className="c-tce-chart-tooltip__label">
          <Caption extraClass="u-font--clear-spacings u-no-wrap">
            {mode}
          </Caption>
        </div>
      </div>}
    </div>
  );
};