import React from 'react';
import {
  View,
  Text,
  SafeAreaView,
  Image,
  Dimensions,
  ScrollView,
} from 'react-native';
import PlayButton from '../../components/PlayButton';
import TransparentBackHeader from '../../components/TransparentBackHeader';
import style from './style';

const {width: deviceWidth} = Dimensions.get('window');

const MovieDetail = props => {
  return (
    <ScrollView contentContainerStyle={style.container}>
      <SafeAreaView style={style.headerContainer}>
        <TransparentBackHeader onPressBack={() => props.navigation.goBack()} />
      </SafeAreaView>
      <Image
        source={{
          uri: 'https://m.media-amazon.com/images/M/MV5BODZlYjQ4NzYtZTg1MC00NGY4LTg4NjQtNGE3ZjRkMjk3YjMyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_Ratio0.7910_AL_.jpg',
          width: deviceWidth,
          height: deviceWidth * 1.2,
        }}
      />
      <View style={style.contentContainer}>
        <PlayButton style={style.playButton} />
        <Text style={style.titleText}>{'Stranger Things'}</Text>
        <Text style={style.subtitle}>{'8.7'}</Text>
        <Text style={style.subtitle}>{`Year: 2016`}</Text>
        <Text style={style.descriptionText}>
          {
            'Young Will Byers is cycling home from a Dungeons & Dragons campaign at a friends house, when a terrifying figure suddenly appears, Will tries to escape and hide, but the Monster abducts him to an alternate dimension'
          }
        </Text>
      </View>
    </ScrollView>
  );
};

export default MovieDetail;