content: import React from 'react';
  import { connect } from '@cerebral/react';
  import { state, sequences } from 'cerebral';
  import { string } from 'prop-types';
  
  import { Wrapper, Image } from './elements';
  
  const dependencies = {
    imagePath: state`app.overlayImagePath`,
    imageClicked: sequences`app.imageClicked`,
  };
  
  function ImageOverlay({ className, imagePath, imageClicked }) {
    if (!imagePath) return null;
  
    function handleKeyPress(event) {
      switch (event.key) {
        case 'Enter':
          return imageClicked({ path: '' });
  
        default:
          break;
      }
    }
  
    return (
      <Wrapper
        className={className}
        role={'button'}
        tabIndex={0}
        onClick={() => imageClicked({ path: '' })}
        onKeyPress={e => handleKeyPress(e)}
      >
        <Image noClick path={imagePath} />
      </Wrapper>
    );
  }
  
  ImageOverlay.propTypes = {
    className: string,
    imagePath: string,
  };
  
  export default connect(
    dependencies,
    ImageOverlay
  );
  