import { StyleSheet, Text, View, Image, TouchableOpacity, FlatList } from 'react-native';
import Container from '../components/Container';

const ScreenHome = ({ navigation }) => {

    const menuItems = [
        {
            key: '1',
            title: 'Apa aja',
            icon: require('../assets/illustration/cheeky.png'),
            screen: 'Contoh',
        },
        {
            key: '2',
            title: 'Boleh',
            icon: require('../assets/illustration/cheeky.png'),
            screen: 'Contoh',
        },
        {
            key: '3',
            title: 'Boleh',
            icon: require('../assets/illustration/cheeky.png'),
            screen: 'Contoh',
        }
    ];

    const renderItem = ({ item }) => (
        <TouchableOpacity
            style={styles.menuItem}
            onPress={() => navigation.navigate(item.screen)}
        >
            <Image source={item.icon} style={styles.menuIcon} />
            <Text style={styles.menuTitle}>{item.title}</Text>
        </TouchableOpacity>
    );


    return (
        <Container>

            <View style={styles.header}>
                <Image
                    source={require('../assets/illustration/66139.jpg')}
                    style={styles.headerImage}
                />
            </View>

            <Text style={styles.title}>Check Care Apps</Text>

            <FlatList
                data={menuItems}
                numColumns={3}
                renderItem={renderItem}
                keyExtractor={(item) => item.key}
                contentContainerStyle={styles.menuGrid}
            />

        </Container>
    );
}

const styles = StyleSheet.create({
    header: {
        flex: 1,
        backgroundColor: "#FFDDDD"
    },
    headerImage: {
        width: '100%',
        height: '100%',
        resizeMode: 'cover',
        position: 'absolute',
    },
    title: {
        fontSize: 36,
        textAlign: 'center',
        fontWeight: 'bold',
    },
    main: {
        flex: 3,
        backgroundColor: "#DDFFDD"
    },
    menuGrid: {
        marginTop: 20,
        justifyContent: 'center',
    },
    menuItem: {
        flex: 1,
        margin: 10,
        alignItems: 'center',
    },
    menuIcon: {
        width: 50,
        height: 50,
        marginBottom: 8,
    },
    menuTitle: {
        fontSize: 14,
        textAlign: 'center',
    },
});

export default ScreenHome;