import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
} from 'react-native';

// Rotation: https://stackoverflow.com/questions/35050774/how-can-i-make-text-vertical-rotated-90-deg-in-react-native

export default StyleSheet.create({
  container: {
  //  backgroundColor: '#FFFFFF',
 //   flex: 1,
  //  alignItems: 'center',
  },
  topView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 202,
    borderBottomWidth: 1,
    borderColor: '#B7BABC',
  },
  rowView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 202,
    borderBottomWidth: 1,
    borderColor: '#B7BABC',
    justifyContent: 'space-evenly',
  },
  topLocationTextStyle: {
    left: 18,
    color: '#587685',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 24,
    lineHeight: 32,
    letterSpacing: 1,
  },
  topTimeTextStyle: {
    right: 18,
    color: '#587685',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 13,
    lineHeight: 17,
    letterSpacing: 1,
  },

  textStyle: {
    left: 18,
    color: '#979797',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    width:  Dimensions.get('window').width - 36,
    fontSize: 16,
    lineHeight: 21,
    letterSpacing: 1,
  },
  locationPicture: {
    left: 18,
    width: 204,
    height: 114,
    borderRadius: 10,
  },
  reviewLocationButton: {
    right: 18,
    width: 115,
    height: 39,
    backgroundColor: '#FFDF74',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    justifyContent : 'center',
    alignItems: 'center',
  },
  reviewLocationText: {
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 18,
    lineHeight: 27,
    letterSpacing: 1,
    color: '#587685',
  },
  topArrowStyle: {
    width: 15,
    height: 15,
    transform: [{ rotate: '180deg'}],
  },
  topButtonStyle: {
    left: 18,
    top: 56,
    backgroundColor: '#F2F5F7',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    justifyContent: 'center',
    alignItems: 'center',
  },
  topTextStyle: {
    position: 'absolute',
    top: 132,
    color: '#587685',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 30,
    lineHeight: 39,
    letterSpacing: 1,
    flex: 1,
  },
  profileImage: {
    position: 'absolute',
    width: 70,
    height: 70,
    top: 56,
    borderRadius: 35,
  },
});