feat(SW-73): Create breakfast selection

components/HotelReservation/SelectRate/BreakfastSelection/breakfastSelection.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
+  padding-bottom: var(--Spacing-x3);
+}
+
+.header {
+  margin-top: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}
+
+.list {
+  margin-top: var(--Spacing-x4);
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: var(--Spacing-x2);
+  row-gap: var(--Spacing-x4);
+}
+
+.list > li {
+  width: 100%;
+}
+
+.list input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}

components/HotelReservation/SelectRate/BreakfastSelection/index.tsx

@@ -0,0 +1,56 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import SelectionCard from "../SelectionCard"
+
+import styles from "./breakfastSelection.module.css"
+
+const choices = [
+  {
+    value: "no",
+    name: "No breakfast",
+    payment: "Always cheeper to get it online",
+    pricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "buffe",
+    name: "Breakfast buffé",
+    payment: "Always cheeper to get it online",
+    pricePerNight: 150,
+    currency: "SEK",
+  },
+]
+
+export default async function BreakfastSelection() {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <Header
+          title={formatMessage({ id: "Breakfast" })}
+          subtitle={formatMessage({
+            id: "Do you want to start the day with Scandics famous breakfast buffé?",
+          })}
+        />
+      </div>
+
+      <ul className={styles.list}>
+        {choices.map((choice) => (
+          <li key={choice.value}>
+            <label>
+              <input type="radio" name="breakfast" value={choice.value} />
+              <SelectionCard
+                title={choice.name}
+                subtext={choice.payment}
+                price={choice.pricePerNight}
+                currency={choice.currency}
+              />
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}