import React from 'react';

import InfoOutlinedIcon from '@material-hu/icons/material/InfoOutlined';
import { SxProps, Theme } from '@material-hu/mui';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

type HuTextInfoTooltipProps = {
  tooltipText: string;
  direction?: 'top' | 'right' | 'bottom' | 'left';
  iconSx?: SxProps<Theme>;
};

export const HuTextInfoTooltip: React.FC<HuTextInfoTooltipProps> = ({
  tooltipText,
  direction = 'right',
  iconSx,
}) => {
  const defaultSx = {
    ml: 1,
    fontSize: 16,
    color: 'new.text.neutral.lighter',
  };

  return (
    <HuTooltip
      title={tooltipText}
      direction={direction}
    >
      <InfoOutlinedIcon
        sx={{
          ...defaultSx,
          ...iconSx,
        }}
      />
    </HuTooltip>
  );
};

export default HuTextInfoTooltip;