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

export default class Quote extends Component {
    render() {
        const { text, author } = this.props // destructuring
        return (

            // Methode 1
            /* <Fragment>
                 <Text style={styleText}>{text}</Text>
                 <Text style={styleAuthor}>&mdash; {author}</Text>
             </Fragment>);
             */


            // Methode 2
            <Fragment>
                <Text style={styles.text}>{text}</Text>
                <Text style={styles.author}>&mdash; {author}</Text>
            </Fragment>);


    }
}



// Styling in React Native mit JavaScript

// Methode 1
const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' };
const styleAuthor = { fontSize: 15, fontsStyle: 'italic', color: 'red' };


// Methode 2

// StyleSheet.create({...styles...})
const styles = StyleSheet.create({
    text: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'black',
        textAlign: 'center',
        // View Styles
        borderWidth: 2,
        borderColor: 'red'

    },
    author: {
        fontSize: 15,
        fontStyle: 'italic',
        color: 'green'
    }
});