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

export default function WorkoutCardComponent() {

    const exercise = new Workout("Développé couché",  25,"8 Series Workout", 412, "assets/images/Sigma-2.jpg","Intense" );



    return (
            <View>
                <View className="rounded-2xl overflow-hidden shadow-lg h-72">

                    <ImageBackground
                        source={require("assets/images/Sigma-2.jpg")}
                        className="w-full h-full"
                    >
                        <View className="flex-row justify-between items-center p-4">
                            <View className="flex-row space-x-4">
                                <View className="flex-row items-center">
                                    <Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
                                </View>
                                <View className="justify-center ml-0.5">
                                    <MaterialCommunityIcons name="square-rounded" size={8}color="white" />
                                </View>
                                <View className="flex-row items-center">
                                    <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-black 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">
                                    Intense
                                </Text>
                            </View>
                        </View>

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