chore: refactor podcast dto to hold different image sizes

src/pages/home.tsx

@@ -32,7 +32,7 @@ export function Home() {
             key={podcast.id}
             title={podcast.title}
             author={podcast.author}
-            imageUrl={podcast.imageUrl}
+            imageUrl={podcast.images.large}
           />
         ))}
       </div>

src/services/podcasts/podcast.dto.ts

@@ -1,15 +1,29 @@
-import { Entry } from "./podcasts.types";
+import { Entry, ImImage } from "./podcasts.types";
 
 export class PodcastDTO {
   id: string;
   title: string;
   author: string;
-  imageUrl: string;
+  images: { small: string; medium: string; large: string };
+  description: string;
 
   constructor(podcast: Entry) {
     this.id = podcast.id.attributes["im:id"];
     this.title = podcast["im:name"].label;
     this.author = podcast["im:artist"].label;
-    this.imageUrl = podcast["im:image"][0].label;
+    this.description = podcast["summary"].label;
+    this.images = this.convertImages(podcast["im:image"]);
+  }
+
+  private convertImages(images: ImImage[]) {
+    const sortedImages = [...images].sort((a, b) => {
+      return parseInt(a.attributes.height) - parseInt(b.attributes.height);
+    });
+
+    return {
+      small: sortedImages[0].label,
+      medium: sortedImages[1].label,
+      large: sortedImages[2].label,
+    };
   }
 }