import React from "react"

import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import styles from "./confirmationSummary.module.css"

export default async function ConfirmationSummary() {
  const intl = await getIntl()
  return (
    <section className={styles.section}>
      <Title as="h4" textAlign="center">
        {intl.formatMessage({ id: "Summary" })}
      </Title>
      <div className={styles.summary}>
        <span>Type of room: Standard Room</span>
        <span>1648 SEK</span>
      </div>
      <div className={styles.summary}>
        <span>Type of bed: King Bed</span>
        <span>0 SEK</span>
      </div>
      <div className={styles.summary}>
        <span>Breakfast: Breakfast Buffé</span>
        <span>198 SEK</span>
      </div>
      <div className={styles.summary}>
        <span>Flexibility: Free Rebooking</span>
        <span>200 SEK</span>
      </div>
    </section>
  )
}