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

type WorkoutPresentationComponentProps = {
  workout: Workout;
};

export default function WorkoutPresentationComponent({
  workout,
}: Readonly<WorkoutPresentationComponentProps>) {
  return (
    <ImageBackground
      className="h-full w-full"
      source={require("assets/images/backgroundWourkout.jpg")}
    >
      <Screen>
        <View className="flex-col h-full justify-between">
          <View className="mt-5 ml-5">
            <TouchableOpacity
              onPress={() => {
                router.back();
              }}
            >
              <Ionicons
                name="chevron-back-circle-outline"
                size={50}
                color="white"
              />
            </TouchableOpacity>
          </View>

          <View className="flex-grow" />

          <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>

          <View className="mb-5">
            <LinearProgressBar duration={workout.duration} />
          </View>
        </View>
      </Screen>
    </ImageBackground>
  );
}