import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, FlatList, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation(); // Initialize navigation

  const buttons = [
    {
      title: 'Monitor Growth',
      onPress:() => navigation.navigate('GrowthMonitoringHome'),
      imageSource: require('./assets/monitor.png'),
    },
    {
      title: 'Diagnose Your Plant',
      onPress: () => navigation.navigate('Diagnose your plant'),
      imageSource: require('./assets/pest.png'),
    },
    {
      title: 'Demand Prediction',
      onPress: () => navigation.navigate('Supply & demand'),
      imageSource: require('./assets/demand.png'),
    },
    {
      title: 'For Beginners',
      onPress: () => navigation.navigate('For beginners'),
      imageSource: require('./assets/beginner.png'),
    },
  ];

  const renderButton = ({ item }) => (
    <TouchableOpacity style={styles.button} onPress={item.onPress}>
      <Image source={item.imageSource} style={styles.buttonImage} />
      <Text style={styles.buttonText}>{item.title}</Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={buttons}
        renderItem={renderButton}
        numColumns={2}
        keyExtractor={(item, index) => index.toString()}
        contentContainerStyle={styles.buttonContainer}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 0,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop:100,
    backgroundColor: '#f0f0f0'
  },
  buttonContainer: {
    paddingHorizontal: 20,
  },
  button: {
    // backgroundColor: '#e8fbe8',
    backgroundColor: 'white',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 10,
    borderWidth: 0,
    borderColor: 'black',
    marginVertical: 20,
    marginHorizontal: 10,
    width: 150,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.10,
    shadowRadius: 4,
    elevation: 8,
    height:200
  },
  buttonText: {
    color: 'black',
    fontSize: 20,
    fontWeight: '900',
    textAlign: 'center',
  },
  buttonImage: {
    width: 100,
    height: 100,
    marginVertical: 10,
  },
});

export default HomeScreen;
