import React from 'react';
import PropTypes from 'prop-types';
import 'reset-css/reset.css';
import '../color/color';
import '../interactions/interactions';
import '../grid/grid';
import '../rule/rule';
import '../typography/typography';
import ErrorIllo from '../../static/images/illustration/missed-target.svg';
import css from './missed-target.css';

const MissedTarget = ({ headline, subheadline, summary }) => (
  <div className={css['ds-missed-target']}>
    <img
      className={css['ds-missed-target__illustration']}
      src={ErrorIllo}
      alt='Arrow laying on the ground next to a target'
    />
    <h1 className={css['ds-missed-target__headline']}>{headline}</h1>
    {subheadline && (
      <h2 className={css['ds-missed-target__subheadline']}>{subheadline}</h2>
    )}
    <p className={css['ds-missed-target__summary']}>{summary}</p>
  </div>
);

MissedTarget.defaultProps = {
  subheadline: '',
  summary: '',
};

MissedTarget.propTypes = {
  headline: PropTypes.string.isRequired,
  subheadline: PropTypes.string,
  summary: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
};

export default MissedTarget;
