import React from "react";
import { Text } from "./ui/text";
import { Box } from "./ui/box";
import { ImageBackground } from "react-native";
import { HStack } from "@/components/ui/hstack";
import { Button } from "@/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>
  );
}