Mobile/components/WorkoutCardComponent.tsx

import {ImageBackground, Text, TouchableOpacity, View} from "react-native";
import React from "react";
import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
import {Workout} from "@/model/Workout";
import {Link, useRouter} from "expo-router";

interface WorkoutCardComponentProps {
    exercise?: Workout,
    background?: String,
    height?: number,

}

export default function WorkoutCardComponent({exercise, height, background}: WorkoutCardComponentProps) {



    const style = () => {
        return `h-full rounded-2xl overflow-hidden ${background ?? "bg-black"}`
    }

    const styleImage = () => {
        return `w-full h-full `
    }
    const router = useRouter();
    return (
        <View className="h-full rounded-2xl overflow-hidden bg-black">


                <ImageBackground
                    source={require("assets/images/Sigma-2.png")}
                    className='h-full w-full'
                >
                    <View className="flex-row justify-between p-4">
                        <View className="flex-row space-x-4 h-44  items-top justify-center ">
                            <View className="flex-row items-top">
                                <Text className="text-white text-sm ml-1">{exercise?.duration} min</Text>
                            </View>
                            <View className="flex-row justify-center">
                                <MaterialCommunityIcons name="square-rounded" size={8} color="white"/>
                            </View>
                            <View className="flex-row">
                                <Text className="text-white text-sm ml-1">{exercise?.name} kcal</Text>
                            </View>
                        </View>
                    </View>

                    <View className="absolute bottom-0 left-0 right-0 p-4  bg-opacity-50">
                        <Text className="text-white text-lg font-bold">{exercise?.name}</Text>
                        <Text className="text-gray-300 text-sm">{exercise?.nbRepetitions}</Text>
                        <View className="flex-row items-center mt-2">
                            <Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
                                {exercise?.name}
                            </Text>
                        </View>
                    </View>
                    <TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full"
                                      onPress={() => {
                                          router.push("/WorkoutScreen");
                                      }}>
                        <AntDesign name="play" size={50} color="orange"/>
                    </TouchableOpacity>
                </ImageBackground>

        </View>
    );
}