import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import styles from './integrationItem.module.css';

const onDocLinkClick = (e, link) => {
  e.stopPropagation();
  window.open(link, '_blank');
}

const IntegrationItem = ({
  deleteHandler = null, icon, url = null, title = '', description = '', onClick = null, dockLink = '', integrated = false
}) => {
  return (
    <div className={ styles.wrapper } onClick={ e => onClick(e, url) }>
      <Icon name={ icon } size="50" />
      <h4 className="text-lg my-4">{ title }</h4>
      <p className={ styles.description }>{ description }</p>
      <div className={ styles.externalIcon } data-hidden={ !url }><Icon name="external-link-alt" size="18" /></div>
      <div className={ styles.footer }>
        {deleteHandler && (
          <div className={ cn(styles.docsLink, 'color-red') } onClick={ deleteHandler }>
            <Icon name="trash" size="16" color="red" marginRight="5" />
            { 'Remove' }
          </div>
        )}
        { dockLink && (
          <div className={ cn(styles.docsLink, !dockLink ? styles.hidden : '') } onClick={ (e) => onDocLinkClick(e, dockLink) }>
            <Icon name="book" size="16" color="gray-medium" marginRight="5" />
            { 'Documentation' }
          </div>
        )}
        <div className={ styles.integratedCheck } data-hidden={ !integrated }>
          <Icon name="check-circle" size="16" color="teal" marginRight="5" />
          { 'Integrated' }
        </div>
      </div>
    </div>
  )
};

export default IntegrationItem;