import {ImageBackground, TouchableOpacity, View, Text} from "react-native";
import Screen from "@/components/ui/Screen";
import * as React from "react";
import {Ionicons} from "@expo/vector-icons";
import {Router, useRouter} from "expo-router";
import LinearProgressBar from "@/components/LinearProgressBar";
import {Workout} from "@/model/Workout";


type WorkoutPresentationComponentProps = {
    workout: Workout;
    dataExercise: Workout[];
    router: Router; // Typage précis recommandé selon ta navigation
};

export default function WorkoutPresentationComponent({ workout}: WorkoutPresentationComponentProps) {
    const router = useRouter();
    return (
        <ImageBackground className="h-full w-full"
                         source={require("assets/images/backgroundWourkout.jpg")}>
            <Screen>
                <View className="flex-col h-full justify-between">

                    {/* Bouton Retour */}
                    <View className="mt-5 ml-5">
                        <TouchableOpacity onPress={() => { router.replace("/ExercicesScreen"); }}>
                            <Ionicons name="chevron-back-circle-outline" size={50} color="white"/>
                        </TouchableOpacity>
                    </View>

                    {/* Permet de pousser le reste du contenu vers le bas */}
                    <View className="flex-grow" />

                    {/* Texte en bas */}
                    <View className="items-center mb-10">
                        <Text className="text-white bg-transparent border-2 border-white px-3 py-1 rounded-full text-2xl font-bold">
                            {workout.nbSeries} x {workout.nbRepetitions}
                        </Text>

                        <Text className="text-white text-4xl font-bold mt-2">{workout.name}</Text>
                    </View>

                    {/* Barre de progression */}
                    <View className="mb-5">
                        <LinearProgressBar duration={workout.duration} />
                    </View>

                </View>

            </Screen>
        </ImageBackground>
    );
}