Separate the code and the style. make sure its dynamic its for a mobile expo app.
// frontend/screens/Home/HomeScreen.js

import React, { useContext, useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Dimensions,
  Alert,
} from 'react-native';
import { AuthContext } from '../../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // Ensure Icon is correctly imported
import { useTheme, ProgressBar, Button, Card } from 'react-native-paper';
import Carousel from 'react-native-reanimated-carousel';
import CarouselCard from '../../Components/CarouselCard'; // Ensure this component is correctly implemented
import { useNavigation } from '@react-navigation/native';

const { width: screenWidth } = Dimensions.get('window');

const HomeScreen = () => {
  const { user } = useContext(AuthContext);
  const theme = useTheme();
  const navigation = useNavigation();

  // Example data; replace with real data sources or hooks
  const [caloriesConsumed, setCaloriesConsumed] = useState(1500);
  const dailyCalorieGoal = 2000;

  const [steps, setSteps] = useState(7500);
  const dailyStepGoal = 10000;

  const [exercises, setExercises] = useState([
    { id: '1', name: 'Push Ups', duration: '30 mins' },
    { id: '2', name: 'Running', duration: '45 mins' },
  ]);

  const [friends, setFriends] = useState([
    { id: '1', name: 'Alice', progress: 60 },
    { id: '2', name: 'Bob', progress: 80 },
  ]);

  // State for Carousel Pagination
  const [activeSlide, setActiveSlide] = useState(0);

  // Water Tracker State
  const [waterIntake, setWaterIntake] = useState(0); // Number of glasses consumed
  const dailyWaterGoal = 8; // Daily water intake goal

  // Water Tracker Handlers
  const addWater = () => {
    if (waterIntake < dailyWaterGoal) {
      setWaterIntake(waterIntake + 1);
    } else {
      Alert.alert('Great Job!', 'You have reached your daily water intake goal!');
    }
  };

  const resetWater = () => {
    setWaterIntake(0);
  };

  // Updated Data for the carousel including Water Tracker
  const carouselItems = [
    {
      title: 'Calorie Tracker',
      iconName: 'fire',
      content: (
        <View>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Consumed: {caloriesConsumed} kcal
          </Text>
          <ProgressBar
            progress={caloriesConsumed / dailyCalorieGoal}
            color={theme.colors.primary}
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Remaining: {dailyCalorieGoal - caloriesConsumed} kcal
          </Text>
          <View style={styles.calorieButtons}>
            <Button
              mode="contained"
              onPress={() => {
                // Implement functionality to add calories
                // For demonstration, we'll just increment consumed calories
                setCaloriesConsumed(caloriesConsumed + 100);
              }}
              icon="plus"
              accessibilityLabel="Add 100 kcal"
              accessibilityRole="button"
              style={styles.calorieButton}
            >
              Add 100 kcal
            </Button>
            <Button
              mode="outlined"
              onPress={() => {
                // Reset calorie count
                setCaloriesConsumed(0);
              }}
              icon="refresh"
              accessibilityLabel="Reset calories"
              accessibilityRole="button"
              style={styles.calorieButton}
            >
              Reset
            </Button>
          </View>
        </View>
      ),
      buttonTitle: 'Add Food',
      onPress: () => navigation.navigate('Nutrition'), // Ensure 'Nutrition' is registered
    },
    {
      title: 'Macro Nutrients',
      iconName: 'food',
      content: (
        <View>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Protein: 120g
          </Text>
          <ProgressBar
            progress={120 / 200} // Example: 200g/day goal
            color="#8BC34A"
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Carbs: 250g
          </Text>
          <ProgressBar
            progress={250 / 300} // Example: 300g/day goal
            color="#03A9F4"
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Fat: 70g
          </Text>
          <ProgressBar
            progress={70 / 100} // Example: 100g/day goal
            color="#FF9800"
            style={styles.progressBar}
          />
        </View>
      ),
      // Set buttonTitle and onPress to undefined instead of null
      buttonTitle: undefined,
      onPress: undefined,
    },
    {
      title: 'Steps Tracker',
      iconName: 'walk',
      content: (
        <View>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Steps Taken: {steps}
          </Text>
          <ProgressBar
            progress={steps / dailyStepGoal}
            color={theme.colors.primary}
            style={styles.progressBar}
          />
          <View style={styles.stepsButtons}>
            <Button
              mode="contained"
              onPress={() => {
                // Implement functionality to add steps
                setSteps(steps + 500);
              }}
              icon="plus"
              accessibilityLabel="Add 500 steps"
              accessibilityRole="button"
              style={styles.stepsButton}
            >
              Add 500 Steps
            </Button>
            <Button
              mode="outlined"
              onPress={() => {
                // Reset steps count
                setSteps(0);
              }}
              icon="refresh"
              accessibilityLabel="Reset steps"
              accessibilityRole="button"
              style={styles.stepsButton}
            >
              Reset
            </Button>
          </View>
        </View>
      ),
      buttonTitle: 'View Steps',
      onPress: () => navigation.navigate('Steps'), // Ensure 'Steps' is registered
    },
    {
      title: 'Exercise Tracker',
      iconName: 'dumbbell',
      content: (
        <View>
          {exercises.map((exercise) => (
            <View key={exercise.id} style={styles.exerciseItem}>
              <Text style={[styles.cardText, { color: theme.colors.text }]}>
                {exercise.name} - {exercise.duration}
              </Text>
            </View>
          ))}
          <Button
            mode="outlined"
            onPress={() => navigation.navigate('Exercises')} // Navigate to Exercises screen
            icon="plus"
            accessibilityLabel="Add Exercise"
            accessibilityRole="button"
            style={styles.addExerciseButton}
          >
            Add Exercise
          </Button>
        </View>
      ),
      buttonTitle: 'Add Exercise',
      onPress: () => navigation.navigate('Exercises'), // Ensure 'Exercises' is registered
    },
    {
      title: 'Water Tracker',
      iconName: 'cup-water',
      content: (
        <View>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            {waterIntake} / {dailyWaterGoal} Glasses
          </Text>
          <ProgressBar
            progress={waterIntake / dailyWaterGoal}
            color="#2196F3"
            style={styles.progressBar}
          />
          <View style={styles.waterButtons}>
            <Button
              mode="contained"
              onPress={addWater}
              style={styles.waterButton}
              icon="plus"
              accessibilityLabel="Add a glass of water"
              accessibilityRole="button"
            >
              Add Glass
            </Button>
            <Button
              mode="outlined"
              onPress={resetWater}
              style={styles.waterButton}
              icon="refresh"
              accessibilityLabel="Reset water intake"
              accessibilityRole="button"
            >
              Reset
            </Button>
          </View>
        </View>
      ),
      buttonTitle: undefined, // No single button since there are multiple actions within
      onPress: undefined,
    },
  ];

  const renderCarouselItem = ({ item }) => (
    <CarouselCard
      title={item.title}
      iconName={item.iconName}
      buttonTitle={item.buttonTitle}
      onPress={item.onPress}
    >
      {item.content}
    </CarouselCard>
  );

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.colors.background }]}>
      <ScrollView contentContainerStyle={styles.container}>
        {/* Welcome Message */}
        {user ? (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome, {user.name}!
          </Text>
        ) : (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome!
          </Text>
        )}

        {/* Carousel Section */}
        <View style={styles.carouselContainer}>
          <Carousel
            width={screenWidth * 0.9} // Width of the carousel
            height={350} // Reduced height from 400 to 350
            data={carouselItems}
            scrollAnimationDuration={0} // Adjusted duration for smoother transitions
            onSnapToItem={(index) => setActiveSlide(index)}
            renderItem={renderCarouselItem}
            mode="parallax" // Optional: choose the carousel mode
            modeConfig={{
              parallaxScrollingScale: 0.9,
              parallaxScrollingOffset: 50,
            }}
            loop={true} // Optional: enable or disable looping
            autoPlay={false} // Disable autoplay unless needed
            // Removed customAnimation to prevent TypeError
          />
          {/* Custom Pagination */}
          <View style={styles.paginationContainer}>
            {carouselItems.map((_, index) => (
              <View
                key={index}
                style={[
                  styles.paginationDot,
                  activeSlide === index && { backgroundColor: theme.colors.primary },
                ]}
              />
            ))}
          </View>
        </View>

        {/* Friends Overview Card */}
        <Card
          style={[
            styles.card,
            {
              backgroundColor: theme.colors.surface,
              marginTop: 10,
              marginBottom: 20, // Added marginBottom to create gap below the card
            },
          ]}
        >
          <Card.Title
            title="Friends"
            titleStyle={styles.cardTitle}
            left={(props) => (
              <Icon
                {...props}
                name="account-group"
                size={30}
                color={theme.colors.primary}
              />
            )}
          />
          <Card.Content>
            {friends.map((friend) => (
              <View key={friend.id} style={styles.friendItem}>
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  {friend.name}
                </Text>
                <ProgressBar
                  progress={friend.progress / 100}
                  color={theme.colors.primary}
                  style={styles.progressBar}
                />
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  Progress: {friend.progress}%
                </Text>
              </View>
            ))}
          </Card.Content>
          <Card.Actions style={{ justifyContent: 'center' }}>
            <Button
              onPress={() => navigation.navigate('Friends')}
              mode="contained" // Ensures the button uses the theme's primary color
              icon="account-group"
              style={styles.fullWidthButton} // New style for consistency
              contentStyle={styles.buttonContent} // Ensures consistent padding
              accessibilityLabel="View friends progress"
              accessibilityRole="button"
            >
              View Friends
            </Button>
          </Card.Actions>
        </Card>

        {/* Buttons Section */}
        <View style={styles.buttonContainer}>
          {/* Resources Button */}
          <Button
            mode="contained"
            icon="book-open-page-variant"
            onPress={() => {
              console.log('Navigating to Resources');
              navigation.navigate('Resources');
            }}
            style={styles.actionButton}
            contentStyle={styles.buttonContent} // Ensures consistent padding
            accessibilityLabel="Go to Resources"
            accessibilityRole="button"
          >
            Resources
          </Button>

          {/* Calculator Button */}
          <Button
            mode="contained"
            icon="calculator"
            onPress={() => {
              console.log('Navigating to Calculator');
              navigation.navigate('Calculator');
            }}
            style={styles.actionButton}
            contentStyle={styles.buttonContent}
            accessibilityLabel="Open Calculator"
            accessibilityRole="button"
          >
            Calculator
          </Button>

          {/* Connect Button */}
          <Button
            mode="contained"
            icon="link"
            onPress={() => {
              console.log('Navigating to Connect');
              navigation.navigate('Connect');
            }}
            style={styles.actionButton}
            contentStyle={styles.buttonContent}
            accessibilityLabel="Connect with Others"
            accessibilityRole="button"
          >
            Connect
          </Button>

          {/* Community Button */}
          <Button
            mode="contained"
            icon="account-supervisor"
            onPress={() => {
              console.log('Navigating to Community');
              navigation.navigate('Community');
            }}
            style={styles.actionButton}
            contentStyle={styles.buttonContent}
            accessibilityLabel="Join Community"
            accessibilityRole="button"
          >
            Community
          </Button>

          {/* Exercises Button */}
          <Button
            mode="contained"
            icon="dumbbell"
            onPress={() => {
              console.log('Navigating to Exercises');
              navigation.navigate('Exercises'); // Ensure 'Exercises' is registered
            }}
            style={styles.actionButton}
            contentStyle={styles.buttonContent}
            accessibilityLabel="Manage Exercises"
            accessibilityRole="button"
          >
            Exercises
          </Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    padding: 20,
    paddingBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  carouselContainer: {
    height: 350, // Reduced from 400 to 350
    marginBottom: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  paginationContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10, // Adjusted margin to position dots below the carousel
  },
  paginationDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#C4C4C4',
    marginHorizontal: 4,
  },
  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap', // Allow wrapping to the next line if necessary
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  actionButton: {
    width: '48%', // Adjusted to fit two buttons per row
    marginVertical: 5,
  },
  buttonContent: {
    height: 50, // Ensures consistent button height
    justifyContent: 'center',
  },
  fullWidthButton: {
    width: '100%', // Makes the button stretch across the container
    borderRadius: 5,
    marginTop: 10,
  },
  card: {
    borderRadius: 10,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    padding: 10,
    // marginBottom will be added inline in the component
  },
  waterTrackerCard: {
    borderRadius: 10,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    padding: 10,
    marginBottom: 20,
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
  },
  progressBar: {
    height: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  exerciseItem: {
    marginBottom: 10,
  },
  friendItem: {
    marginBottom: 15,
  },
  waterTrackerContent: {
    alignItems: 'center',
  },
  waterText: {
    fontSize: 18,
    marginBottom: 10,
  },
  waterButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  waterButton: {
    flex: 1,
    marginHorizontal: 5,
  },
  calorieButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    marginTop: 10,
  },
  calorieButton: {
    flex: 1,
    marginHorizontal: 5,
  },
  stepsButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    marginTop: 10,
  },
  stepsButton: {
    flex: 1,
    marginHorizontal: 5,
  },
  addExerciseButton: {
    marginTop: 10,
  },
});

export default HomeScreen;