Mobile/app/(tabs)/(home)/HomeScreen.tsx

import {SafeAreaView, ScrollView, Text, View} from "react-native";
import React, {useEffect, useState} from "react";
import WorkoutCardComponent from "@/components/WorkoutCardComponent";
import Screen from "@/components/ui/Screen";
import CalendarComponent from "@/components/CalendarComponent";
import WelcomeComponent from "@/components/WelcomeComponent";
import ActivitiesComponent from "@/components/ActivitiesComponent";
import {Workout} from "@/model/Workout";
import {useRouter} from "expo-router";
import {getExercices} from "@/api/services/ExercicesServices";
import {customRandom, random} from "nanoid";
import {getRandomNumber} from "react-native-svg/lib/typescript/lib/util";
export default function HomeScreen() {

    const [exercices, setExercices] = useState<Workout[]>([]);

    const getRandomNumber = (min: number, max: number) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await getExercices();
                setExercices(data);
            } catch (err: any) {

            }
        };

        fetchData();
    }, []);

    return (
        <ScrollView className="h-full ">
            <Screen>


                <View className="h-1/6 justify-center">
                    <WelcomeComponent />
                </View>

                <View className="h-1/6 mt-2">
                    <View className="flex-row justify-between items-center mb-4">
                        <Text className="text-lg font-bold text-black">
                            Fitness Metrics
                        </Text>
                        <Text className="text-orange-500 font-semibold">
                            See All
                        </Text>
                    </View>
                    <CalendarComponent />
                </View>

                <View className="h-1/5 mt-8">
                    <View className="flex-row justify-between items-center mb-4">
                        <Text className="text-lg font-bold text-black">
                            Workout
                        </Text>
                        <Text className="text-orange-500 font-semibold">
                            See All
                        </Text>
                    </View>
                    <WorkoutCardComponent exercise={exercices[getRandomNumber(0,3)]} background="bg-black" />
                </View>

                <View className="h-1/5 mt-8">
                    <View className="flex-row justify-between items-center mb-4 mt-6 ">
                        <Text className="text-lg font-bold text-black">
                            Activities
                        </Text>
                        <Text className="text-orange-500 font-semibold">
                            See All
                        </Text>
                    </View>
                    <ActivitiesComponent />
                </View>
            </Screen>
            </ScrollView>
    );
}