import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Link from './Link';

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

  render() {
    const { label, subLabel, 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-labelWrapper">
          <div className="Link-label display-small">{label}</div>
          <div className="Link-subLabel tiny--soft">{subLabel}</div>
        </div>
      </Link>
    );
  }
}

export default LinkBlock;