import React from 'react';
import CircleIcon from 'app/shared/components/circleIcon/circleIcon';

export interface Props {
  imageUrl?: string;
  text?: string;
  subText?: string;
  link?: string;
  isMedia?: boolean;
  onClick?: () => void;
}

const BunkerAdjustmentInfoBox = ({ imageUrl, text, subText, link, isMedia, onClick }: Props) => (
  <div className="c-bunker-adjustment-info-box">
    <div className="u-position--relative">
      <img className="c-bunker-adjustment-info-box__image" src={imageUrl} alt="info" />
      <div className="u-position--absolute u-position--center u-cursor--pointer" onClick={onClick}>
        { isMedia && <CircleIcon icon="play-media" isLarge /> }
        { !isMedia && link && link.length > 0 &&
            <a className="c-button c-button--filled c-button--big" href={link} target="_blank" rel="noreferrer">
              <i className="icon-open-box u-margin-right--small" />
              Open
            </a>
        }
      </div>
    </div>
    <div className="o-gutter--medium">
      <span className="c-bunker-adjustment-info-box__text u-display--block">{text}</span>
      <span className="c-bunker-adjustment-info-box__sub-text u-uppercase u-display--block">{subText}</span>
    </div>
  </div>
);

export { BunkerAdjustmentInfoBox };