import React from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { STATUS_DEFS } from '../../constants/parcelStatuses';

function StatusTooltipOverlay(props) {
  const { status, placement = 'top', actionTooltip = false, children } = props;

  return (
    <OverlayTrigger
      trigger={['hover']}
      placement={placement}
      overlay={
        <Popover
          id="popover-trigger-hover-focus"
          title={STATUS_DEFS[status].label}
        >
          {actionTooltip
            ? STATUS_DEFS[status].action.desc
            : STATUS_DEFS[status].desc}
        </Popover>
      }
    >
      {children}
    </OverlayTrigger>
  );
}

export default StatusTooltipOverlay;
