import { useContext, useState } from 'react';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMessage } from '@fortawesome/free-solid-svg-icons';

import { SettingsContext } from '../../context/contexts';

import styles from './index.module.scss';

interface ChatBotBtnProps {
  onClick: () => void;
  customizeMode?: boolean;
}

export default function ChatBotBtn({
  onClick,
  customizeMode,
}: ChatBotBtnProps) {
  const settings = useContext(SettingsContext);
  const [hover, setHover] = useState(false);

  return (
    <div
      onClick={onClick}
      style={{
        backgroundColor: hover
          ? settings.chatBotSecondaryColor
          : settings.chatBotPrimaryColor,
      }}
      className={classNames(
        styles['botfoundry-chatbot-btn'],
        'ease-in-out',
        customizeMode ? styles['customize-mode'] : null
      )}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <FontAwesomeIcon className={styles['btn-icon']} icon={faMessage} />
    </div>
  );
}