import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../visuals/Icon/Icon';

import Link from './Link';

const ArrowRightIcon = require('../../visuals/Icon/svg/ic_keyboard_arrow_right.svg');

class LinkBlock extends Component {
  static propTypes = {
    to: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    body: PropTypes.string,
    image: PropTypes.string,
    imageWidth: PropTypes.string,
  };
  static defaultProps = {
    body: null,
    image: '',
    imageWidth: '',
  };

  render() {
    const { title, body, image, imageWidth, ...props } = this.props;

    return (
      <Link modifier="block" {...props}>
        {image && <img src={image} alt="img" style={{ width: imageWidth }} className="Link-image" />}
        <div className="Link-textWrapper">
          <div className="Link-title display-small">{title}</div>
          <div className="Link-body tiny--soft">{body}</div>
        </div>
        <Icon icon={ArrowRightIcon} />
      </Link>
    );
  }
}

export default LinkBlock;