// // screens/GrowthMonitoringScreen.js

// import React, { useState } from 'react';
// import { View, Text, StyleSheet, Button } from 'react-native';
// import GrowthMonitoringStyles from './Styles/GrowthMonitoringHomeStyles';


// const GrowthMonitoringHomeScreen= ({ navigation }) => {
//     return (
//       <View style={GrowthMonitoringStyles.container}>
//         <Button 
//           title="Monitor the Growth" 
//           style={GrowthMonitoringStyles.button}
//           color="#4CAF50" // This color matches the example color in the styles. Change if necessary.
//           onPress={() => navigation.navigate('MonitorGrowth')} 
//         />
       
      
//         <Button 
//           title="Predict the Order Date" 
//           style={GrowthMonitoringStyles.button}
//           color="#4CAF50" // This color matches the example color in the styles. Change if necessary.
//           onPress={() => navigation.navigate('PredictOrder')} 
//         />
//       </View>
//     );
//   }
  
//   export default GrowthMonitoringHomeScreen;



import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';

const HeaderComponent = ({ onBack }) => {
  return (
    <View style={styles.headerContainer}>
      <TouchableOpacity onPress={onBack} style={styles.backButtonContainer}>
        <Text style={styles.backButton}>←</Text>
      </TouchableOpacity>
      <Text style={styles.headerTitle}>Growth Monitoring</Text>
    </View>
  );
};

const CustomButton = ({ onPress, title, imageSource }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Image source={imageSource} style={styles.buttonImage} resizeMode="contain" />
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

const GrowthMonitoringHomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1 }}>
      <HeaderComponent onBack={() => navigation.goBack()} />
      <View style={styles.container}>
        <Image source={require('./assets/growing.png')} style={styles.cuteImage} resizeMode="contain" />
        <Text style={styles.quoteText}>Nurture it, watch it grow. Every little care counts!</Text>
        <CustomButton
          title="Monitor the Growth"
          imageSource={require('./assets/GrowthPic.png')}
          onPress={() => navigation.navigate('MonitorGrowth')}
        />
        <CustomButton
          title="Predict the Order Date"
          imageSource={require('./assets/predict.png')}
          onPress={() => navigation.navigate('PredictOrder')}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFF',
    padding: 20,
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#7aae64',
    width: '100%',
    marginBottom: 2,
    height:80
    
  },
  backButtonContainer: {
    marginRight: 10,
  },
  backButton: {
    fontSize: 30,
    marginRight: 20,
    color: 'white',
  },
  headerTitle: {
    
    fontWeight: 'bold',
    color: 'black',
    textAlign:'center',
    textAlign: "center",
    fontFamily: 'sans-serif-medium',
    fontSize: 20,
    marginTop:5
  },
  button: {
    flexDirection: 'row', 
    backgroundColor: "#4CAF50",
    padding: 10, // Adjusted padding
    borderRadius: 8,
    width: '90%', // Made the button a bit wider
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 15,
  },
  buttonText: {
    color: '#FFF',
    fontSize: 18, 
    fontWeight: 'bold',
    marginLeft: 25,  
  },
  buttonImage: {
    width: 60, 
    height: 50,
  },
  cuteImage: {
    width: 300,   
    height: 200,  
    marginBottom: 20, 
  },
  quoteText: {
    fontSize: 16,
    fontStyle: 'italic',
    fontFamily: 'sans-serif-medium',
    color:'darkgreen',
    textAlign: 'center',
    marginBottom: 30,  // Space between quote and buttons
    paddingHorizontal: 20, // To ensure longer text fits within the screen width
  },
});

export default GrowthMonitoringHomeScreen;
