import React from 'react'
import PropTypes from 'prop-types';
import sy from './image-widget.module.scss'
import { css } from '@emotion/css'
import classNames from 'classnames';

const ImageWidget = (props) => {
  const {
    src,
    link,
    alt,
    objectFit,
    height,
    width,
    marginBottom,
  } = props

  if (!src) {
    return null
  }
  const isCanLink = (link !== "#") && (link.length > 0)

  return (
    <a
      href={link}
      onClick={(e) => {
        if (!isCanLink) {
          e.preventDefault();
          return false;
        }
      }}

      className={classNames(css`
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        margin-bottom: ${marginBottom}px;
        cursor: ${isCanLink ? 'pointer' : 'default'};
        div:hover{
          cursor: ${isCanLink ? 'pointer' : 'default'};
          img:hover{
            cursor: ${isCanLink ? 'pointer' : 'default'};
          }
        }
      `,
        sy.boxImageWidget,
      )}
    >
      <div
        className={classNames(css`
          height: ${height};
          width: ${width};
        `,
          sy.boxImage,
        )}
      >
        <img
          src={src}
          alt={`img-widget-${alt}`}
          className={css`
          height: ${height};
          width: ${width};
          object-fit: ${objectFit};
          overflow: 'hidden';
        `}
        />
      </div>

    </a >
  )
}


ImageWidget.propTypes = {
  link: PropTypes.string,
  src: PropTypes.string,
  alt: PropTypes.string,
  objectFit: PropTypes.any,
  height: PropTypes.string,
  width: PropTypes.string,
  marginBottom: PropTypes.number,
};

ImageWidget.defaultProps = {
  src: null,
  link: '#',
  alt: 'ImageWidget',
  objectFit: 'contain',
  height: 'auto',
  width: 'auto',
  marginBottom: 0,
};


export default ImageWidget


