import React, { FC } from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/animations/shift-away-subtle.css'; // eslint-disable-line import/no-extraneous-dependencies
import { TooltipDefaultProps, TooltipProps } from './definitions';
import { styled } from '../../styles';
import { TippyStyles, tooltipStyles, getVariant } from './styles';

export const TooltipComponent: FC<TooltipProps> = ({ children, ...props }) => (
  <>
    <TippyStyles />
    <Tippy {...props}>
      <span>{children}</span>
    </Tippy>
  </>
);

TooltipComponent.defaultProps = TooltipDefaultProps;

export const Tooltip = styled(TooltipComponent)<TooltipProps>(
  tooltipStyles,
  getVariant
);
