import { Workout } from "@/model/Workout";
import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import React from "react";

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.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"
          onPress={() => {
            router.push("/WorkoutScreen");
          }}
        >
          <AntDesign name="play" size={50} color="orange" />
        </TouchableOpacity>
      </ImageBackground>
    </View>
  );
}