import React from 'react';
import { View, StyleSheet } from 'react-native';
import Background from '../component/background';
//import BoltIcon from '../asset/icon/lightning-bolt';
//import LightningWord from '../asset/icon/lightning-word';
import Text from '../component/text';
import Icon from '../component/icon';

const welcomeStyles = StyleSheet.create({
  mainIcon: {
    height: 150,
    width: 150,
    marginLeft: 'calc( 50% - 75 )',
    margin: 10,
  },
});
const styles = StyleSheet.create({
  background: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  boltWrapper: {
    marginTop: 20,
    marginBottom: 30,
  },
  wordWrapper: {
    marginTop: 20,
  },
  title: {
    marginTop: 12,
    marginBottom: 12,
    fontFamily: 'OpenSans Light',
    fontSize: '300%',
    fontWeight: 'bolder',
    textTransform: 'uppercase',
  },
  subtitle: {
    marginTop: 12,
    fontFamily: 'OpenSans Light',
  },
});

const WelcomeView = () => (
  <Background image="textured-bg" style={styles.background}>
    <View style={styles.boltWrapper}>
      <Icon
        image={require('../asset/icon/bitsIcon.png')}
        style={welcomeStyles.mainIcon}
      />
    </View>
    <Text style={styles.title}>BITS</Text>
    <Text style={styles.subtitle}>shop and redeem loyalty rewards</Text>
  </Background>
);

export default WelcomeView;
