import React, { ReactNode } from 'react';
import cx from 'classnames';

interface HoverInfoProps {
  children: ReactNode;
  icon?: string;
  extraClass?: string;
  extraClassContent?: string;
  position?: 'right'| 'left'| 'top';
}

const HoverInfo = ({ extraClass, extraClassContent, icon = 'icon-info-straight', children, position = 'right' }: HoverInfoProps) => {
  const hoverInfoClass = cx('c-hover-info', extraClass);
  const iconClass = cx('c-hover-info__icon', icon);
  const contentClass = cx(
    'c-hover-info__content',
    `c-hover-info__content--position-${ position }`,
    extraClassContent,
  );
  return (
    <span className={hoverInfoClass}>
      <i className={iconClass} onClick={(e) => e.stopPropagation()}/>
      <div className={contentClass}>{children}</div>
    </span>);
};

export default HoverInfo;