import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './Details.css'

class Details extends Component {
  static propTypes = {
    title: PropTypes.string,
    image: PropTypes.string,
    tags: PropTypes.array,
    description: PropTypes.string,
  }

  render() {
    let { title, image, tags, description } = this.props

    if (title === undefined) {
      title = 'Titel fehlt noch'
    }
    if (image === undefined) {
      image = 'bude.jpg'
    }
    if (tags === undefined) {
      tags = []
    }
    if (description === undefined) {
      description = 'Beschreibung fehlt noch'
    }

    return (
      <div>
        <div id={'container'}>
          <header className={'header'}>
            <h2>There will be a header</h2>
          </header>
          <div className={'title'}>{title}</div>
          <div className={'imagearea'}>
            <div className={'img'}>
              <img
                className={'fit'}
                src={require('../../images/' + image)} // eslint-disable-line no-undef
              />
            </div>
          </div>
          <div className={'tags'}>
            {tags.map(tag => (
              <u key={tag} className={'tag'}>
                {tag}
              </u>
            ))}
          </div>
          <div className={'description'}>{description}</div>
          <footer className={'searchbar'}>
            <h3>There might be a searchbar</h3>
          </footer>
        </div>
      </div>
    )
  }
}

export default Details

@@ -154,20 +154,19 @@
 = %7B%0A    
-titl
+nam
 e: PropT
@@ -297,20 +297,19 @@
   let %7B 
-titl
+nam
 e, image
@@ -352,20 +352,19 @@
     if (
-titl
+nam
 e === un
@@ -380,20 +380,19 @@
 %7B%0A      
-titl
+nam
 e = 'Tit
@@ -812,20 +812,19 @@
 itle'%7D%3E%7B
-titl
+nam
 e%7D%3C/div%3E

Rename title to name