const Header = (props) => {
  const header = props.parts.name
  return (
    <h1>{header}</h1>
  )
}

const Content = (props) => {
  const object_1 = props.parts.parts[0]
  const object_2 = props.parts.parts[1]
  const object_3 = props.parts.parts[2]

  return (
    <p>
      {object_1.name} {object_1.exercises}
      <br />
      {object_2.name} {object_2.exercises}
      <br />
      {object_3.name} {object_3.exercises}
    </p>
  )
}

const Total = (props) => {
  const one = props.parts.parts[0].exercises
  const two = props.parts.parts[1].exercises
  const three = props.parts.parts[2].exercises

  return (
    <p>Number of exercises {one + two + three}</p>
  )
}

const App = () => {
  const course = {
    name: 'Half Stack application development',
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10
      },
      {
        name: 'Using props to pass data',
        exercises: 7
      },
      {
        name: 'State of a component',
        exercises: 14
      }
    ]
  }

  return (
    <div>
      <Header parts={course}/>
      <Content parts={course}/>
      <Total parts={course}/>
    </div>
  )
}

export default App