import { ExerciceAPIService } from "@/api/services/exercice/exercice.service.api";
import WorkoutPresentationComponent from "@/components/WorkoutPresentationComponent";
import { useRouter } from "expo-router";
import React, { useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";

const service = new ExerciceAPIService();

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 service.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>
  );
}