Mobile/app/components/ExerciceOverview.tsx

import React from "react";
import {Text} from "./ui/text";
import {Box} from "./ui/box";
import {ImageBackground} from "react-native";
import {HStack} from "@/app/components/ui/hstack";
import {Button} from "@/app/components/ui/button";
import {AntDesign} from "@expo/vector-icons";

export default function ExerciceOverview() {
    const exercise = {
        name: "Jumping Jacks",
        time: "00:30",
        kcal: 5,
        sets: 3,
        difficulty: "Medium",
        imageUri: "https://random-image-pepebigotes.vercel.app/api/random-image",
    };


    const image = {uri: exercise.imageUri};
    return (
        <Box className="h-1/4">
            <ImageBackground
                source={image}
                imageStyle={{ borderRadius: 15 }}
            >
                <HStack >
                    <Text className="font-extrabold text-black">{exercise.time}</Text>
                    <Text className="text-black">{exercise.kcal} kcal</Text>
                </HStack>

                <HStack>

                    <Box className="flex-1 items-start">
                        <Text className="text-black">{exercise.name}</Text>
                        <Text className="text-black">{exercise.sets} Sets</Text>
                        <Text className="text-black">{exercise.difficulty} Difficulty</Text>
                    </Box>

                    <Button className="bg-transparent items-end ">
                        <AntDesign name="play" size={24} />
                    </Button>
                </HStack>


            </ImageBackground>
        </Box>
    );

}