import { h, render } from 'preact'; // eslint-disable-line no-unused-vars

// displays outro text and a link to restart the module
const FinalScreen = props => ( // eslint-disable-line no-unused-vars
  <section class="wrapper">
    <header className="header">
      <div className="number--square  number--square--huge"><span>{props.number}</span></div>
      <h1 className="header__title">{props.title}</h1>
    </header>
    <main className="intro">{props.outrotext.split('\n').map(item => <span>{item}<br /></span>)}</main>
    <footer className="footer footer--titlescreen">
      { !props.isFetching ? <a href="#" title={props.restart} className="button--wide" onClick={() => props.navigate('titlescreen')}>
        {props.restart}</a> : [] }
    </footer>
  </section>
);

export default FinalScreen;