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

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

}

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



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

    const styleImage = () => {
        return `w-full h `
    }

    console.log(styleImage())

    console.log(style())

    return (
        <View className={style()}>


                <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.calories} 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.repetitions}</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.level}
                            </Text>
                        </View>
                    </View>

                    <TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
                        <AntDesign name="play" size={50} color="orange"/>
                    </TouchableOpacity>
                </ImageBackground>

        </View>
    );
}