import React, { useState } from 'react';
import InfoIcon from '../../icons/InfoIcon';
import Typography from '../Typography';
import { InfoTipProps } from './interfaces';
import { ContentWrapper, Wrapper } from './styles';

const InfoTip = ({ content }: InfoTipProps) => {
  const [hovered, setHovered] = useState(false);
  return (
    <Wrapper
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <InfoIcon filled={hovered} />
      {hovered && (
        <ContentWrapper>
          <Typography variant="utility3" color="#ffffff" fontSize={12}>
            {content}
          </Typography>
        </ContentWrapper>
      )}
    </Wrapper>
  );
};

export default InfoTip;