feat(SW-72): Add flexibility selection

components/HotelReservation/SelectRate/SelectionCard/index.tsx

@@ -0,0 +1,42 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./selectionCard.module.css"
+
+import { SelectionCardProps } from "@/types/components/hotelReservation/selectRate/selectionCard"
+
+export default async function SelectionCard({
+  price,
+  membersPrice,
+  currency,
+  title,
+  subtext,
+}: SelectionCardProps) {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.card}>
+      <div>
+        <Title className={styles.name} as="h5" level="h3">
+          {title}
+        </Title>
+        <div className={styles.nameInfo}>i</div>
+      </div>
+      <Caption color="burgundy">{subtext}</Caption>
+
+      <div>
+        <Caption color="burgundy" className={styles.price}>
+          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
+          {price} {currency}/{formatMessage({ id: "night" })}
+        </Caption>
+
+        <Caption color="burgundy" className={styles.membersPrice}>
+          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
+          {formatMessage({ id: "Members" })} {membersPrice} {currency}/
+          {formatMessage({ id: "night" })}
+        </Caption>
+      </div>
+    </div>
+  )
+}