feat: display guest logic

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -1,3 +1,6 @@
+"use client"
+import { useIntl } from "react-intl"
+
 import { dt } from "@/lib/dt"
 
 import { CalendarIcon, PersonIcon } from "@/components/Icons"
@@ -11,7 +14,7 @@ import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
 export default function StayCard({ stay, lang }: StayCardProps) {
   const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
-
+  const { formatMessage } = useIntl()
   const arrival = dt(checkinDate).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
   const arrivalDateTime = arrival.format("YYYY-MM-DD")
@@ -19,7 +22,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
-  const guestAmount = 3
+  const tempGuestAmount = 3
 
   return (
     <article className={styles.stay}>
@@ -47,7 +50,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           </div>
           <div className={styles.guest}>
             <PersonIcon color="burgundy" className={styles.icon} />
-            <Caption>{`${guestAmount} ${guestAmount > 1 ? "Guests" : "Guest"}`}</Caption>
+            <Caption>{`${tempGuestAmount} ${tempGuestAmount > 1 ? formatMessage({ id: "Guests" }) : formatMessage({ id: "Guest" })}`}</Caption>
           </div>
         </div>
       </footer>