post.js

import React , { Component } from 'react'
import styled from 'styled-components'
import { BACKDROP_PATH , POSTER_PATH } from '../constants/ActionTypes'
import { Layout } from '../layouts/Layout'
import { CallAPIInfo } from '../utils/api'
import { Poster } from '../components/Movies'

class Post extends Component{
   static async getInitialProps({query}){
      const { id } = query
      const res = await CallAPIInfo(id ,'get',null)
      return { movie: res.data }
   }
   render(){
      var { movie } = this.props
      var { tagline , id , backdrop_path , original_title , poster_path , overview , vote_average , vote_count} = movie
      return (
         <Layout>
            <MovieBackground backdrop_path={`${BACKDROP_PATH}${backdrop_path}`} alt={original_title}>
               <MovieInfo>
                  <Poster src={`${POSTER_PATH}${poster_path}`} alt={original_title}/>
                  <div>
                     <h1>{original_title}</h1>
                     <p>{overview}</p>
                     <h5>{vote_average} - {vote_count} - {tagline}</h5>
                  </div>
               </MovieInfo>
            </MovieBackground>
         </Layout>
      )
   }
}

export default Post

const MovieBackground = styled.div`
   background: url(${props => props.backdrop_path}) no-repeat;
   position: relative;
   padding-top: 50vh;
   background-size: cover;
`

const MovieInfo = styled.div`
   background: white;
   padding: 2rem 10%;
   text-align: left;
   display: flex;
   > div {
      margin-left: 20px;
      > p {
         text-align: justify;
      }
   }
   img {
      position: relative;
      top: -5rem;
      width: 180px;
      height: 250px;
   }
   
`;