fix this code.

// screens/HomeScreen.js

import React, { useContext, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Dimensions,
} from 'react-native';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme, ProgressBar, Button, Card } from 'react-native-paper';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import CarouselCard from '../Components/CarouselCard';

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

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

  // Example data; replace with real data sources
  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);

  // Data for the carousel
  const carouselItems = [
    {
      title: 'Calorie Tracker',
      iconName: 'fire',
      content: (
        <>
          <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>
        </>
      ),
      buttonTitle: 'Add Food',
      onPress: () => navigation.navigate('Nutrition'),
      icon: 'fire',
    },
    {
      title: 'Macro Nutrients',
      iconName: 'nutrition',
      content: (
        <>
          <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}
          />
        </>
      ),
      buttonTitle: null,
      onPress: null,
      icon: 'nutrition',
    },
    {
      title: 'Steps Tracker',
      iconName: 'walk',
      content: (
        <>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Steps Taken: {steps}
          </Text>
          <ProgressBar
            progress={steps / dailyStepGoal}
            color={theme.colors.primary}
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Steps Remaining: {dailyStepGoal - steps}
          </Text>
        </>
      ),
      buttonTitle: 'View Steps',
      onPress: () => navigation.navigate('Steps'),
      icon: 'walk',
    },
    {
      title: 'Exercise Tracker',
      iconName: 'dumbbell',
      content: (
        <>
          {exercises.map((exercise) => (
            <View key={exercise.id} style={styles.exerciseItem}>
              <Text style={[styles.cardText, { color: theme.colors.text }]}>
                {exercise.name} - {exercise.duration}
              </Text>
            </View>
          ))}
        </>
      ),
      buttonTitle: 'Add Exercise',
      onPress: () => navigation.navigate('Exercises'),
      icon: 'dumbbell',
    },
  ];

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

  const carouselLayout = {
    sliderWidth: screenWidth,
    itemWidth: screenWidth * 0.8,
    // You can adjust these based on your design preferences
  };

  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
            data={carouselItems}
            renderItem={renderCarouselItem}
            sliderWidth={carouselLayout.sliderWidth}
            itemWidth={carouselLayout.itemWidth}
            loop={false}
            autoplay={false}
            inactiveSlideScale={0.94}
            inactiveSlideOpacity={0.7}
            onSnapToItem={(index) => setActiveSlide(index)}
            containerCustomStyle={styles.carousel}
            contentContainerCustomStyle={styles.carouselContent}
            slideStyle={styles.slideStyle}
          />
          <Pagination
            dotsLength={carouselItems.length}
            activeDotIndex={activeSlide}
            containerStyle={styles.paginationContainer}
            dotStyle={styles.paginationDot}
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.6}
          />
        </View>

        {/* Friends Overview Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Friends"
            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="#6200EE"
                  style={styles.progressBar}
                />
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  Progress: {friend.progress}%
                </Text>
              </View>
            ))}
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Friends')}>View Friends</Button>
          </Card.Actions>
        </Card>

        {/* Optional: Additional Features or Content */}
        {/* You can add more sections here if needed */}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    padding: 20,
    paddingBottom: 40,
    // backgroundColor is handled by SafeAreaView
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    // color is handled dynamically
  },
  carouselContainer: {
    height: 350, // Adjust based on card height
    marginBottom: 20,
  },
  carousel: {
    // Optional: Customize carousel container
  },
  carouselContent: {
    // Optional: Customize carousel content
  },
  slideStyle: {
    // Optional: Customize each slide
  },
  paginationContainer: {
    paddingVertical: 8,
  },
  paginationDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 8,
    backgroundColor: '#4F8EF7', // Customize based on theme
  },
  card: {
    borderRadius: 10,
    elevation: 3, // For Android shadow
    shadowColor: '#000', // For iOS shadow
    shadowOffset: { width: 0, height: 2 }, // For iOS shadow
    shadowOpacity: 0.1, // For iOS shadow
    shadowRadius: 5, // For iOS shadow
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
    // color is handled dynamically
  },
  progressBar: {
    height: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  exerciseItem: {
    marginBottom: 10,
  },
  friendItem: {
    marginBottom: 15,
  },
});

export default HomeScreen;

// components/CarouselCard.js

import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet } from 'react-native';
import { Card, Button } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme } from 'react-native-paper';

const CarouselCard = ({ title, iconName, children, buttonTitle, onPress }) => {
  const theme = useTheme();

  // Defensive Checks
  if (!title) {
    console.warn('CarouselCard: "title" prop is missing.');
  }
  if (!iconName) {
    console.warn(`CarouselCard: "iconName" prop is missing for title "${title}".`);
  }

  return (
    <Card style={[styles.card, { backgroundColor: theme.colors.surface }]}>
      <Card.Title
        title={title || 'Untitled'}
        left={(props) =>
          iconName ? (
            <Icon
              {...props}
              name={iconName}
              size={30}
              color={theme.colors.primary}
            />
          ) : null
        }
      />
      <Card.Content>{children}</Card.Content>
      {buttonTitle && onPress && (
        <Card.Actions>
          <Button onPress={onPress}>{buttonTitle}</Button>
        </Card.Actions>
      )}
    </Card>
  );
};

// Define PropTypes for the component
CarouselCard.propTypes = {
  title: PropTypes.string.isRequired,
  iconName: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  buttonTitle: PropTypes.string,
  onPress: PropTypes.func,
};

// Define default props for optional props
CarouselCard.defaultProps = {
  buttonTitle: null,
  onPress: null,
};

const styles = StyleSheet.create({
  card: {
    borderRadius: 10,
    elevation: 3, // For Android shadow
    shadowColor: '#000', // For iOS shadow
    shadowOffset: { width: 0, height: 2 }, // For iOS shadow
    shadowOpacity: 0.1, // For iOS shadow
    shadowRadius: 5, // For iOS shadow
    marginHorizontal: 10, // Margin for carousel spacing
  },
});

export default CarouselCard;
 ERROR  Warning: Failed prop type: Carousel: prop type `containerCustomStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Carousel (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:213368:36)
    in HomeScreen (created by SceneView)
 ERROR  Warning: Failed prop type: Carousel: prop type `contentContainerCustomStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Carousel (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:213368:36)
    in HomeScreen (created by SceneView)
 ERROR  Warning: Failed prop type: Carousel: prop type `slideStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Carousel (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:213368:36)
    in HomeScreen (created by SceneView)
 ERROR  Warning: Failed prop type: Pagination: prop type `containerStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Pagination (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215147:36)
    in HomeScreen (created by SceneView)
 ERROR  Warning: Failed prop type: Pagination: prop type `dotContainerStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Pagination (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215147:36)
    in HomeScreen (created by SceneView)
RROR  Warning: Failed prop type: Pagination: prop type `dotStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Pagination (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215147:36)
    in HomeScreen (created by SceneView)
 ERROR  Warning: Failed prop type: Pagination: prop type `inactiveDotStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at Pagination (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215147:36)
    in HomeScreen (created by SceneView)
 WARN  react-native-snap-carousel: It is recommended to use at least version 0.44 of React Native with the plugin
 ERROR  Warning: Failed prop type: PaginationDot: prop type `containerStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
 ERROR  Warning: Failed prop type: PaginationDot: prop type `inactiveStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
 ERROR  Warning: Failed prop type: PaginationDot: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
 ERROR  Warning: Failed prop type: PaginationDot: prop type `containerStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
    in main(RootComponent)
 ERROR  Warning: Failed prop type: PaginationDot: prop type `inactiveStyle` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
 ERROR  Warning: Failed prop type: PaginationDot: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at PaginationDot (http://10.0.0.203:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:215320:36)
    in Pagination (created by HomeScreen)
 WARN  "apple-outline" is not a valid icon name for family "material-community"
 ERROR  Warning: CarouselCard: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    in CarouselCard (created by CellRenderer)