feat: use real history data from backend

src/components/HistoryCard.tsx

@@ -1,6 +1,12 @@
 import { Heading, HStack, Text, VStack } from '@gluestack-ui/themed';
 
-export function HistoryCard() {
+import { HistoryDTO } from '@dtos/HistoryDTO';
+
+type HistoryCardProps = {
+  data: HistoryDTO;
+};
+
+export function HistoryCard({ data }: HistoryCardProps) {
   return (
     <HStack
       w="$full"
@@ -13,16 +19,16 @@ export function HistoryCard() {
       justifyContent="space-between">
       <VStack flex={1} mr="$5">
         <Heading color="$white" fontSize="$md" textTransform="capitalize" numberOfLines={1}>
-          Costas
+          {data.group}
         </Heading>
 
         <Text color="$gray100" fontSize="$lg" numberOfLines={1}>
-          Puxada Frontal
+          {data.name}
         </Text>
       </VStack>
 
       <Text color="$gray300" fontSize="$md">
-        08:36
+        {data.hour}
       </Text>
     </HStack>
   );