feat(SW-71): Create bed selection

components/HotelReservation/SelectRate/BedSelection/index.tsx

@@ -0,0 +1,70 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import SelectionCard from "../SelectionCard"
+
+import styles from "./bedSelection.module.css"
+
+const choices = [
+  {
+    value: "queen",
+    name: "Queen bed",
+    payment: "160 cm",
+    pricePerNight: 0,
+    membersPricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "king",
+    name: "King bed",
+    payment: "160 cm",
+    pricePerNight: 0,
+    membersPricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "twin",
+    name: "Twin bed",
+    payment: "90 cm + 90 cm",
+    pricePerNight: 82,
+    membersPricePerNight: 67,
+    currency: "SEK",
+  },
+]
+
+export default async function BedSelection() {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <Header
+          title={formatMessage({ id: "Choose type of bed" })}
+          subtitle={formatMessage({ id: "How do you want to sleep?" })}
+        />
+        <p>
+          {formatMessage({
+            id: "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.",
+          })}
+        </p>
+      </div>
+
+      <ul className={styles.list}>
+        {choices.map((choice) => (
+          <li key={choice.value}>
+            <label>
+              <input type="radio" name="bed" value={choice.value} />
+              <SelectionCard
+                title={choice.name}
+                subtext={`(${choice.payment})`}
+                price={choice.pricePerNight}
+                membersPrice={choice.membersPricePerNight}
+                currency={choice.currency}
+              />
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}