import React, { memo } from 'react';

import { Button, Icon } from '..';

export default memo(({ icon, header, disabled, description, buttonText, buttonOnClick, route }) => {
  return (
    <div className='vz-dashboard-home-features-card-wrapper'>
      <div className='vz-dashboard-home-features-card'>
        <Icon
          name={icon}
          className='vz-dashboard-home-features-icon-wrapper'
          iconClassName='vz-dashboard-home-features-icon'
          size='100%'
        />
        <div className='vz-dashboard-home-features-card-header'>
          {header}
        </div>
        <div className='vz-dashboard-home-features-card-body'>
          {description}
        </div>
        <div className='vz-dashboard-home-features-card-footer'>
          <Button
            className='vz-dashboard-home-features-button'
            onClick={evt => {
              try {
                if (disabled) {
                  return;
                }
                if (buttonOnClick) {
                  return buttonOnClick(evt);
                } else if (route) {
                  return vizality.api.routes.navigateTo(route);
                }
              } catch (err) {

              }
            }}
            size={Button.Sizes.LARGE}
          >
            {buttonText}
          </Button>
        </div>
      </div>
    </div>
  );
});
