import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator, Text } from 'react-native';
import { useRouter } from 'expo-router';
import WorkoutPresentationComponent from "@/components/WorkoutPresentationComponent";
import {getExercices} from "@/api/services/ExercicesServices";

export default function WorkoutScreen() {
    const router = useRouter();

    const [exercices, setExercices] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const loadExercices = async () => {
            try {
                const data = await getExercices();
                setExercices(data);
            } catch (err: any) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        loadExercices();
    }, []);

    if (loading) {
        return (
            <View className="flex-1 justify-center items-center bg-black">
                <ActivityIndicator size="large" color="#fff" />
            </View>
        );
    }

    if (error) {
        return (
            <View className="flex-1 justify-center items-center bg-black">
                <Text className="text-red-500 text-xl">{error}</Text>
            </View>
        );
    }

    const workout = exercices[1]; // Choisis l’exercice que tu souhaites afficher

    return (
        <View className="h-full rounded-2xl">
            <WorkoutPresentationComponent workout={workout} dataExercise={exercices} router={router} />
        </View>
    );
}