'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    Image,
	View,
    StyleSheet,
    Dimensions,
	Text,
    Platform,
    ImageBackground
} = ReactNative;

import Immutable, {Map} from 'immutable';

export default class GlobalTopHeader extends React.Component {

    constructor(props) {
        super (props);
	}

    render() {
		return(
			<View style={styles.container}>
				<ImageBackground source={require('../../image/globalpurchase_bg.png')} style={styles.container}>
					<View style={styles.listContainer}>
						<Image source={require('../../image/globalpurchase_zheng_icon.png')} style={styles.thumbnail}/>
						<Text style={styles.name}>正品保证</Text>
					</View>
					<View style={styles.listContainer}>
						<Image source={require('../../image/globalpurchase_fly_icon.png')} style={styles.thumbnail}/>
						<Text style={styles.name}>海外直邮</Text>
					</View>
					<View style={styles.listContainer}>
						<Image source={require('../../image/globalpurchase_smile_icon.png')} style={styles.thumbnail}/>
						<Text style={styles.name}>售后无忧</Text>
					</View>
				</ImageBackground>
			</View>
		);
	}
};

let {width, height} = Dimensions.get('window');


const styles = StyleSheet.create({
	container: {
        width: width,
        height: 40,
		flexDirection: 'row',
        flexWrap: 'wrap',
    },
	listContainer: {
        width: width / 3,
        backgroundColor: 'transparent',
		flexDirection: 'row',
        flexWrap: 'wrap',
		justifyContent: 'center',
        alignItems: 'center',
    },
	name: {
		marginLeft: 5,
        color: 'white',
    },
	thumbnail: {
		width: 20,
        height: 20,
	}
});