import EStyleSheet from 'react-native-extended-stylesheet';
import { Dimensions } from 'react-native';
import Colors from '../../../../theme/Colors';
import { Fonts, Metrics } from './../../../../theme';

const { width, height } = Dimensions.get('window');
export default EStyleSheet.create({
  bookItem: {
    width: '100%',
    flexDirection: 'row',
    marginTop: EStyleSheet.value('100rem') + Metrics.statusBarHeight
  },
  itemImg: {
    height: '90rem',
    width: '60rem',
    marginLeft: '10rem',
    marginBottom: '15rem',
    backgroundColor: Colors.white,
    elevation: 20,
    shadowOpacity: 0.4,
    shadowRadius: 8,
    shadowOffset: {
      height: 1,
      width: 1
    }
  },
  itemDetails: {
    width: '78%',
    marginLeft: '10rem'
  },
  itemTitle: {
    ...Fonts.style.semiBoldTheme,
    fontSize: '16rem',
    marginBottom: '8rem',
    color: Colors.theme
  },
  itemSubTitle: {
    ...Fonts.style.semiBoldTheme,
    fontSize: '15rem',
    marginBottom: '8rem',
    color: Colors.darkBlack
  },
  itemBookIdTitle: {
    ...Fonts.style.semiBoldTheme,
    fontSize: '15rem',
    // marginBottom: '8rem',
     color: Colors.midDarkGrey
  },
  statusTxt: {
    ...Fonts.style.semiBoldBlack,
    fontSize: '15rem'
  },
  bookDetailsInnerContainer: {
    marginTop: '30rem',
    width: '100%-30rem',
    alignSelf: 'center'
  },
  bookDetailsItem: {
    flexDirection: 'row',
    marginVertical: '18rem'
  },
  bookDetailsLabel: {
    ...Fonts.style.semiBoldBlack,
    fontSize: '17rem',
    color: Colors.darkGrey,
    width: '50%'
  },
  bookDetailsValue: {
    ...Fonts.style.semiBoldBlack,
    fontSize: '17rem',
    color: Colors.black,
    width: '50%'
  },
  reserveBtn: {
    height: '35rem',
    width: '135rem',
    backgroundColor: Colors.skyblue,
    borderRadius: '6rem',
    marginTop: '80rem',
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  reserveTxt: {
    ...Fonts.style.boldWhite,
    fontSize: '18rem',
    '@media android': {
      marginTop: '-4rem'
    }
  },
  flexDirection:{
    flexDirection:'row'
  }
});
