refactored Header component

src/components/Header.js

@@ -3,42 +3,33 @@ 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
+      <div className='header__container'>
-        style={{
+        <h1 className='header__container-heading'>{name}</h1>
-          backgroundSize: 'cover',
+        <button
-          backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
+          onClick={() => alert('not a movie!')}
-          backgroundPosition: 'center',
+          className='header__container-btnPlay'
-        }}
+        >
-        className='header'
+          <PlayLogo className='header__container-btnMyList-play' />
-      >
+          Play
-        <div className='header__container'>
+        </button>
-          <h1 className='header__container-heading'>{movie.name}</h1>
-          <button
-            onClick={() => alert('not a movie!')}
-            className='header__container-btnPlay'
-          >
-            <PlayLogo className='header__container-btnMyList-play' />
-            Play
-          </button>
 
-          <button className='header__container-btnMyList'>
+        <button className='header__container-btnMyList'>
-            <AddLogo className='header__container-btnMyList-add' />
+          <AddLogo className='header__container-btnMyList-add' />
-            My List
+          My List
-          </button>
+        </button>
-          <p className='header__container-overview'>{movie.overview}</p>
+        <p className='header__container-overview'>{overview}</p>
-        </div>
+      </div>
-        <div className='header--fadeBottom'></div>
+      <div className='header--fadeBottom'></div>
-      </header>
+    </header>
-    )
   )
 }