From d952c8971911372322aba9c364981fb253079875 Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Fri, 8 Oct 2021 17:54:36 -0400
Subject: [PATCH] refactored Header component

---
 src/components/Header.js | 49 ++++++++++++++++------------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 8536017..dc11aab 100644
--- a/src/components/Header.js
+++ b/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={{
-          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>
-          <button
-            onClick={() => alert('not a movie!')}
-            className='header__container-btnPlay'
-          >
-            <PlayLogo className='header__container-btnMyList-play' />
-            Play
-          </button>
+    <header style={backgroundStyle} className='header'>
+      <div className='header__container'>
+        <h1 className='header__container-heading'>{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'>
-            <AddLogo className='header__container-btnMyList-add' />
-            My List
-          </button>
-          <p className='header__container-overview'>{movie.overview}</p>
-        </div>
-        <div className='header--fadeBottom'></div>
-      </header>
-    )
+        <button className='header__container-btnMyList'>
+          <AddLogo className='header__container-btnMyList-add' />
+          My List
+        </button>
+        <p className='header__container-overview'>{overview}</p>
+      </div>
+      <div className='header--fadeBottom'></div>
+    </header>
   )
 }