Add texts to i18n

components/HotelReservation/SelectRate/RoomCard/index.tsx

@@ -1,27 +1,31 @@
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import { RoomProps } from "./roomCard"
 
 import styles from "./roomCard.module.css"
 
-export default function RoomCard({ room }: RoomProps) {
+export default async function RoomCard({ room }: RoomProps) {
+  const { formatMessage } = await getIntl()
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
-        <div className={styles.nameContainer}>
+        <div>
           <Title className={styles.name} as="h5" level="h3">
             {room.name}
           </Title>
           <div className={styles.nameInfo}>i</div>
         </div>
-        <Caption color="burgundy">17 - 24 m² (1 - 2 persons)</Caption>
+        <Caption color="burgundy">{room.size}</Caption>
         <Caption color="burgundy">{room.description}</Caption>
 
         <Caption color="burgundy">
-          From <span className={styles.price}>{room.pricePerNight}</span>{" "}
-          {room.currency}/night
+          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
+          {formatMessage({ id: "From" })}{" "}
+          <span className={styles.price}>{room.pricePerNight}</span>{" "}
+          {room.currency}/{formatMessage({ id: "night" })}
         </Caption>
 
         <Button
@@ -31,12 +35,17 @@ export default function RoomCard({ room }: RoomProps) {
           theme="primaryDark"
           className={styles.button}
         >
-          <label htmlFor={`room-${room.id}`}>Choose room</label>
+          <label htmlFor={`room-${room.id}`}>
+            {formatMessage({ id: "Choose room" })}
+          </label>
         </Button>
       </div>
       {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
       {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img alt="A photo of the room" src={room.imageSrc} />
+      <img
+        alt={formatMessage({ id: "A photo of the room" })}
+        src={room.imageSrc}
+      />
     </div>
   )
 }