Integrate api with hey-api

app/components/ui/internal/MediaImageCard.vue

@@ -2,7 +2,7 @@
 import tinycolor from "tinycolor2";
 import type { VNodeRef } from "vue";
 import Badge from "../badge/Badge.vue";
-import { Dot } from "lucide-vue-next";
+import { Dot, Smile } from "lucide-vue-next";
 
 const imageElement = shallowRef<VNodeRef | null>(null);
 
@@ -17,23 +17,21 @@ watch(palette, () => {
 });
 
 interface Props {
-    id: number;
+    id: string;
     image_url: string;
     image_alt?: string;
     title: string;
-    type: string;
 
     subtitle?: string;
     description?: string;
 
     tooltipEnabled?: boolean;
     tooltipMetadata: {
-        studio: string;
-        type: string;
-        episodes: number;
-        rating: number;
-
-        tags?: string[];
+        rating?: number;
+        episodeCount?: number;
+        type?: string;
+        studio?: string;
+        genres?: string[];
     },
     tooltipCollisionBoundary?: Element;
 
@@ -64,8 +62,14 @@ const props = defineProps<Props>();
                         <TooltipContent :sideOffset="16" :collisionBoundary="props.tooltipCollisionBoundary"
                             :avoidCollisions="true" side="right" tooltipColor="muted" tooltipArrowColor="muted">
                             <div class="flex flex-col gap-1 m-4">
-                                <div class="flex">
+                                <div class="flex gap-4">
                                     <p class="text-xl font-bold truncate max-w-[24ch]">{{ props.title }}</p>
+                                    <div class="flex items-center gap-2">
+                                        <Smile />
+                                        <p class="text-xl font-bold">
+                                            {{ props.tooltipMetadata.rating }}
+                                        </p>
+                                    </div>
                                 </div>
                                 <p class="text-lg font-semibold tracking-wider" :style="{ color: paletteVibrantHsl }">{{
                                     props.tooltipMetadata?.studio }}
@@ -73,10 +77,10 @@ const props = defineProps<Props>();
                                 <div class="flex items-center text-base font-semibold">
                                     <p>{{ props.tooltipMetadata?.type }}</p>
                                     <Dot />
-                                    <p>{{ props.tooltipMetadata?.rating }} episodes</p>
+                                    <p>{{ props.tooltipMetadata?.episodeCount }} эпизод(ов)</p>
                                 </div>
-                                <div class="flex gap-2">
-                                    <Badge v-for="tag in props.tooltipMetadata?.tags">
+                                <div class="flex flex-wrap gap-2 max-w-64">
+                                    <Badge v-for="tag in props.tooltipMetadata?.genres">
                                         {{ tag }}
                                     </Badge>
                                 </div>