refactored Header component

src/components/Header.js

@@ -3,25 +3,17 @@ import React from 'react'
 import PlayLogo from '../static/images/play-button.svg'
 import AddLogo from '../static/images/add.svg'
 
-const Header = ({ movie }) => {
+const Header = ({ movie: { backdrop_path, name, overview } }) => {
   const backgroundStyle = {
     backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backdrop_path})`,
     backgroundPosition: 'center',
   }
 
   return (
-    movie && (
+    <header style={backgroundStyle} className='header'>
-      <header
-        style={{
-          backgroundSize: 'cover',
-          backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
-          backgroundPosition: 'center',
-        }}
-        className='header'
-      >
       <div className='header__container'>
-          <h1 className='header__container-heading'>{movie.name}</h1>
+        <h1 className='header__container-heading'>{name}</h1>
         <button
           onClick={() => alert('not a movie!')}
           className='header__container-btnPlay'
@@ -34,12 +26,11 @@ const Header = ({ movie }) => {
           <AddLogo className='header__container-btnMyList-add' />
           My List
         </button>
-          <p className='header__container-overview'>{movie.overview}</p>
+        <p className='header__container-overview'>{overview}</p>
       </div>
       <div className='header--fadeBottom'></div>
     </header>
   )
-  )
 }
 
 export default Header