import React, { Component } from 'react';
import { Text, StyleSheet, View } 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>);
            */

            // View -> Style
            <View style={styles.container}>
                <Text style={styles.text}>{text}</Text>
                <Text style={styles.author}>&mdash; {author}</Text>
            </View>);
    }
}



// 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({
    container: {
        //paddingLeft: 20,
        //paddingRight:20.
        paddingHorizontal: 20, // -> padding (left and right)
        borderColor: 'red',
        margin: 25,
        borderRadius: 20,
        backgroundColor: 'white',

        //Shadow for Android
        elevation: 5,

        //Shadow for IOS and Web
        shadowOpacity: 0.25,
        shadowOffset: {
            width: 0,
            height: 0.75,
        },
        shadowRadius: 1.5,
    },
    text: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'black',
        textAlign: 'center',
        // View Style
    },
    author: {
        fontSize: 15,
        fontStyle: 'italic',
        textAlign: 'right',
        color: 'green'
    }
});