import { useRef } from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { marked } from 'marked';

interface Props {
  label: string;
  markdown: string;
}

export default function MetricLabel({ label, markdown }: Props) {
  const ref = useRef<HTMLSpanElement>(null);
  const html = marked.parse(markdown) as string;

  const popover = (
    <Popover style={{ maxWidth: 320 }}>
      <Popover.Body
        style={{ fontSize: '0.85em' }}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </Popover>
  );

  return (
    <OverlayTrigger trigger={['hover', 'focus']} placement="top" overlay={popover}>
      <span
        ref={ref}
        style={{
          cursor: 'help',
          borderBottom: '1px dotted currentColor',
          textDecorationSkipInk: 'none',
        }}
      >
        {label}
      </span>
    </OverlayTrigger>
  );
}
