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

// shared Title component
// displays intro text and a link to start the module
const TitleScreen = 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.introtext.split('\n').map(item => <span>{item}<br /></span>)}</main>
    <footer className="footer footer--titlescreen">
      { !props.isFetching ? <a href="#" title="Start" className="button--wide" onClick={() => props.navigate(props.navigateTo)}>
        {props.start}</a> : [] }
    </footer>
  </section>
);

export default TitleScreen;