import { StyleSheet, View } from 'react-native';
import React, { Component } from 'react';
import BpkButton, { BUTTON_TYPES, ICON_ALIGNMENTS } from 'react-native-bpk-component-button';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  }
});
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BpkButton
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          disabled
          type={BUTTON_TYPES.destructive}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          large
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.primary}
          title="Book flight"
          icon="baggage"
          iconAlignment={ICON_ALIGNMENTS.leading}
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          iconOnly
          onPress={() => {}}
        />
      </View>
    );
  }
}