const Header = (props) => {
  return <h1>{props.course}</h1>
}

const Part = (props) => {
  return <p>{props.partName} {props.exerciseCount}</p>

}

const Content = (props) => {
  return (
    <>
    {props.sections.map((section) => {
    return <Part partName={section.part} exerciseCount={section.exerciseCount}/>
  })}
    </>
  )
}

const Total = (props) => {
  return (
    <>
    <p>Number of exercises {props.sections.reduce(
      (sum, section) => {
        return sum + section.exerciseCount
      },
      0
    )}</p>
    </>
  )
}


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

  return (
    <div>
      <Header course={course.name}/>
      <Content sections={course.sections}/>
      <Total sections={course.sections}/>
    </div>
  )
}

export default App