import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { customJokeStub } from '../data/stub/CustomJokeStub';
import { sampleJokeStub } from '../data/stub/SampleJokeStub';
import { SafeAreaView } from 'react-native'
import JokeListItem from "../components/JokeListItem";
import '../types/extension';
import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";

export default function Catalogue() {
    const allJokes = [...customJokeStub, ...sampleJokeStub];
    return (
        <>
            <SafeAreaView style={styles.topSafeArea}/>
            <SafeAreaView style={styles.container}>
                <StatusBar style="light" />
                <JokeListItem jokes={allJokes}/>
            </SafeAreaView>
        </>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: purpleColor,
    },
    centered: {
        color:darksalmonColor,
        fontSize:24,
        textAlign: "center",
        paddingBottom:20,
    },
    title: {
        backgroundColor: indigoColor
    },
    topSafeArea: {
        flex: 0,
        backgroundColor: indigoColor
    }
});