import { useCallback } from 'react';

import type { EventHandler, SyntheticEvent } from 'react';
import type { IconProps } from '../Icon/toIcon';
import type { AlertParams } from '../NextApp/lib/CoreUi';

import InfoIcon from '../Icon/InfoIcon';
import { useAppAlert } from '../NextApp/lib/CoreUi';

interface InfoProps extends Omit<IconProps, 'onClick'> {
  text: AlertParams['content'];
}

const Info = ({ text, ...iconProps }: InfoProps) => {
  const alert = useAppAlert();

  const handleClick: EventHandler<SyntheticEvent> = useCallback((event) => {
    event.stopPropagation();
    event.preventDefault();

    alert({ content: text });
  }, []);

  return (
    <div role="button" onClick={handleClick}>
      <InfoIcon {...iconProps} />
    </div>
  );
};

export default Info;