import React from 'react';
import { Icon } from 'UI';

interface Props {
  title: string;
  icon: string;
  description: string;
  useIcon?: boolean;
}

function IntegrationModalCard(props: Props) {
  const { title, icon, description, useIcon } = props;
  return (
    <div className='flex items-start p-5 gap-4'>
      <div className='border rounded-lg p-2 shrink-0'>
        {useIcon ? <Icon name={icon} size={80} /> : <img className="h-20 w-20" src={"/assets/" + icon + ".svg"} alt="integration" />}
      </div>
      <div>
        <h3 className='text-2xl'>{title}</h3>
        <div>{description}</div>
      </div>
    </div>
  );
}

export default IntegrationModalCard;