import type { IconProps } from './Icon';
import { Icon } from './Icon';
import type { TooltipProps } from './Tooltip';
import { Tooltip } from './Tooltip';

type Props = Omit<TooltipProps, 'children'> & {
  icon?: IconProps['icon'];
  iconSize?: IconProps['size'];
  iconColor?: IconProps['color'];
  className?: string;
  tabIndex?: number;
};

export function IconTooltip({
  content,
  icon = 'info',
  iconColor,
  iconSize,
  ...tooltipProps
}: Props) {
  return (
    <Tooltip content={content} {...tooltipProps}>
      <Icon
        className="opacity-60 hover:opacity-100"
        icon={icon}
        size={iconSize}
        color={iconColor}
      />
    </Tooltip>
  );
}