feat: show actual exercise data on card

src/components/ExerciseCard.tsx

@@ -2,14 +2,20 @@ import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import { Heading, HStack, Icon, Image, Text, VStack } from '@gluestack-ui/themed';
 import { ChevronRight } from 'lucide-react-native';
 
-type Props = TouchableOpacityProps;
+import { api } from '@services/api';
 
-export function ExerciseCard({ ...others }: Props) {
+import { ExerciseDTO } from '@dtos/ExerciseDTO';
+
+type Props = TouchableOpacityProps & {
+  data: ExerciseDTO;
+};
+
+export function ExerciseCard({ data, ...others }: Props) {
   return (
     <TouchableOpacity {...others}>
       <HStack bg="$gray500" alignItems="center" p="$2" pr="$4" rounded="$md" mb="$3">
         <Image
-          source={{ uri: 'https://i.pravatar.cc/200' }}
+          source={{ uri: `${api.defaults.baseURL}/exercise/thumb/${data.thumb}` }}
           alt="imagem do exercício"
           h="$16"
           w="$16"
@@ -20,11 +26,11 @@ export function ExerciseCard({ ...others }: Props) {
 
         <VStack flex={1}>
           <Heading color="white" fontSize="$lg">
-            Puxada Frontal
+            {data.name}
           </Heading>
 
           <Text fontSize="$sm" color="$gray200" mt="$1" numberOfLines={2}>
-            3 séries de 12 repetições with a really big line
+            {data.series} séries de {data.repetitions} repetições
           </Text>
         </VStack>