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,
    label: PropTypes.string.isRequired,
    subLabel: PropTypes.string,
  };
  static defaultProps = {
    subLabel: null,
  };

  render() {
    const { label, subLabel, ...props } = this.props;

    return (
      <Link modifier="block" {...props}>
        <div className="Link-labelWrapper">
          <div className="Link-label">{label}</div>
          <div className="Link-subLabel">{subLabel}</div>
        </div>
        <Icon icon={ArrowRightIcon} />
      </Link>
    );
  }
}

export default LinkBlock;