import React, { FunctionComponent } from 'react';

import { StyledTooltip } from './styled-component';
import { useTheme } from '../Theme';
import { TooltipProps } from './types.d';

export const Tooltip: FunctionComponent<TooltipProps> = ({
  children,
  title = '',
  enterDelay,
  open,
  placement,
  onClose,
  onOpen,
}) => {
  const theme = useTheme();
  return (
    <StyledTooltip
      $theme={theme}
      enterDelay={enterDelay}
      onClose={onClose}
      onOpen={onOpen}
      open={open}
      placement={placement}
      title={title}
    >
      <div>{children}</div>
    </StyledTooltip>
  );
};
