import React, { FC } from 'react';
import { Tooltip } from '../Tooltip';

import { IconButton } from '../IconButton';
import * as sc from './styles';
import { SvgInfo } from '../../assets/images/icons';

type TooltipProps = React.ComponentProps<typeof Tooltip>;
type IconButtonProps = React.ComponentProps<typeof IconButton>;

export interface TooltipIconProps extends TooltipProps {
  iconButtonProps?: IconButtonProps;
}

export const TooltipIcon: FC<TooltipIconProps> = ({
  children,
  iconButtonProps,
  ...tooltipProps
}) => (
  <sc.Icon Asset={SvgInfo} width={14} height={14} {...iconButtonProps}>
    <Tooltip variant="secondary" {...tooltipProps}>
      {children}
    </Tooltip>
  </sc.Icon>
);
