import React, { FC } from 'react';
import { Tooltip } from '../Tooltip';
import { IconButton } from '../IconButton';
import * as sc from './styles';
import { SvgInfo } from '../../assets/images/icons';
import { PartialBy } from '~/shared/typing/helpers';

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

export type TooltipIconProps = TooltipProps & {
  iconButtonProps?: PartialBy<IconButtonProps, 'Asset'>;
};

export const TooltipIcon: FC<TooltipIconProps> = ({
  children,
  iconButtonProps,
  ...tooltipProps
}) => (
  <Tooltip {...tooltipProps}>
    <sc.Icon
      Asset={SvgInfo}
      width={16}
      height={16}
      {...iconButtonProps}
      {...(children ? { mr: '4px' } : {})}
    >
      {children}
    </sc.Icon>
  </Tooltip>
);
