From 2f1f81530ac1af1485f8647026266842d3413925 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@forefront.se>
Date: Fri, 5 Jul 2024 14:20:51 +0200
Subject: [PATCH] feat: add placeholder data

---
 .../(live)/(public)/hotelreservation/page.tsx |  2 -
 .../hotelreservation/select-hotel/page.tsx    | 61 ++++++++++++++++++-
 .../SelectHotel/HotelCard/data.ts             | 10 +++
 .../SelectHotel/HotelCard/index.tsx           | 28 +++------
 4 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 components/HotelReservation/SelectHotel/HotelCard/data.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/page.tsx
index d91db5177..f2f81fc97 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/page.tsx
@@ -1,5 +1,3 @@
-import HotelCard from "@/components/HotelReservation/SelectHotel/HotelCard"
-
 import { LangParams, PageArgs } from "@/types/params"
 
 export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
index cdb105c7b..bf1d9b70e 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
@@ -1,9 +1,68 @@
 import HotelCard from "@/components/HotelReservation/SelectHotel/HotelCard"
+import { HotelCardData } from "@/components/HotelReservation/SelectHotel/HotelCard/data"
+import ListContainer from "@/components/MyPages/Blocks/Stays/ListContainer"
 
 export default function SelectHotelPage() {
+  const hotelData: HotelCardData[] = [
+    {
+      hotel: {
+        name: "Helsinki Hub",
+        address: "Kaisaniemenkatu 7, Helsinki",
+        description:
+          "Modern urban hotel in a impressive 1920s printing house in Helsinki city centre.",
+        rooms: "Only 4 rooms left",
+        button: "Book from 1549 SEK/night",
+        label: [
+          "Free cancellation until 18:00",
+          "Breakfast included",
+          "Free WiFi",
+          "Pay at the hotel",
+        ],
+      },
+    },
+    {
+      hotel: {
+        name: "Stockholm Serenity",
+        address: "Drottninggatan 99, Stockholm",
+        description:
+          "Charming boutique hotel located in the heart of Stockholm with scenic city views.",
+        rooms: "Only 2 rooms left",
+        button: "Book from 1899 SEK/night",
+        label: [
+          "Free cancellation until 18:00",
+          "Breakfast included",
+          "Free WiFi",
+          "Fitness center",
+          "Pet friendly",
+        ],
+      },
+    },
+    {
+      hotel: {
+        name: "Copenhagen Comfort",
+        address: "Vesterbrogade 23, Copenhagen",
+        description:
+          "Elegant hotel offering modern amenities and quick access to Copenhagen's main attractions.",
+        rooms: "Only 3 rooms left",
+        button: "Book from 1725 SEK/night",
+        label: [
+          "Free cancellation until 18:00",
+          "Breakfast included",
+          "Free WiFi",
+          "24-hour front desk",
+          "Airport shuttle",
+        ],
+      },
+    },
+  ]
+
   return (
     <div>
-      <HotelCard />
+      <ListContainer>
+        {hotelData.map((data) => (
+          <HotelCard key={data.hotel.name} hotel={data.hotel} />
+        ))}
+      </ListContainer>
     </div>
   )
 }
diff --git a/components/HotelReservation/SelectHotel/HotelCard/data.ts b/components/HotelReservation/SelectHotel/HotelCard/data.ts
new file mode 100644
index 000000000..d327cc092
--- /dev/null
+++ b/components/HotelReservation/SelectHotel/HotelCard/data.ts
@@ -0,0 +1,10 @@
+export interface HotelCardData {
+  hotel: {
+    name: string
+    address: string
+    description: string
+    rooms: string
+    button: string
+    label: string[]
+  }
+}
diff --git a/components/HotelReservation/SelectHotel/HotelCard/index.tsx b/components/HotelReservation/SelectHotel/HotelCard/index.tsx
index c62ed321f..14ed4e483 100644
--- a/components/HotelReservation/SelectHotel/HotelCard/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelCard/index.tsx
@@ -5,34 +5,26 @@ import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
+import { HotelCardData } from "./data"
+
 import styles from "./hotelCard.module.css"
 
-const chipValues = [
-  "Free cancellation until 18:00",
-  "Breakfast included",
-  "Free WiFi",
-  "Pay at the hotel",
-]
-
-export default function HotelCard() {
+export default function HotelCard({ hotel }: HotelCardData) {
   return (
     <div className={styles.card}>
       <Image src="" alt="hotel image" className={styles.image} />
       <div className={styles.information}>
         <div className={styles.title}>
           <ScandicLogoIcon color="red" />
-          <Title as="h4">Helsinki Hub</Title>
+          <Title as="h4">{hotel.name}</Title>
         </div>
         <div className={styles.description}>
-          <span>Kaisaniemenkatu 7, Helsinki</span>
-          <span>
-            Modern urban hotel in a impressive 1920s printing house in Helsinki
-            city centre.
-          </span>
+          <span>{hotel.address}</span>
+          <span>{hotel.description}</span>
         </div>
         <div className={styles.labels}>
-          {chipValues.map((value) => (
-            <Chip key={value}>{value}</Chip>
+          {hotel.label.map((chip, index) => (
+            <Chip key={`chip-${index}`}>{chip}</Chip>
           ))}
         </div>
         <div className={styles.book}>
@@ -42,10 +34,10 @@ export default function HotelCard() {
             size="small"
             className={styles.button}
           >
-            Book from 1549 SEK/night
+            {hotel.button}
           </Button>
           <Body color="burgundy">
-            <span>Only 4 rooms left</span>
+            <span>{hotel.rooms}</span>
           </Body>
         </div>
       </div>