feat: finish my pages overview page according to wireframe

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -4,34 +4,19 @@ import Title from "@/components/MyPages/Title"
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
+import type { StaysProps } from "@/types/components/myPages/stays"
 
-const stays = [
-  {
-    dateArrive: new Date("04 27 2024"),
-    dateDepart: new Date("04 28 2024"),
-    guests: 2,
-    hotel: "Scandic Helsinki Hub",
-  },
-  {
-    dateArrive: new Date("05 27 2024"),
-    dateDepart: new Date("05 28 2024"),
-    guests: 2,
-    hotel: "Scandic Örebro Central",
-  },
-  {
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic Oslo City",
-  },
-]
-
-export default function UpcomingStays({ lang }: LangParams) {
+export default function UpcomingStays({
+  lang,
+  stays,
+}: StaysProps & LangParams) {
   return (
     <section className={styles.container}>
-      <Title level="h2" uppercase>
-        Your upcoming stays
-      </Title>
+      <header>
+        <Title level="h2" uppercase>
+          Your upcoming stays
+        </Title>
+      </header>
       <section className={styles.stays}>
         {stays.map((stay) => (
           <Stay key={stay.hotel} {...stay} lang={lang} />