import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

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

import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"

export default function SummarySection({ summary }: SummarySectionProps) {
  const intl = useIntl()
  const roomType = `${intl.formatMessage({ id: "Type of room" })}: ${summary.roomType}`
  const bedType = `${intl.formatMessage({ id: "Type of bed" })}: ${summary.bedType}`
  const breakfast = `${intl.formatMessage({ id: "Breakfast" })}: ${summary.breakfast}`
  const flexibility = `${intl.formatMessage({ id: "Flexibility" })}: ${summary.flexibility}`

  return (
    <section className={styles.section}>
      <Title as="h4" textAlign="center">
        {intl.formatMessage({ id: "Summary" })}
      </Title>
      <Caption className={styles.summary}>
        <span>{roomType}</span>
        <span>1648 SEK</span>
      </Caption>
      <Caption className={styles.summary}>
        <span>{bedType}</span>
        <span>0 SEK</span>
      </Caption>
      <Caption className={styles.summary}>
        <span>{breakfast}</span>
        <span>198 SEK</span>
      </Caption>
      <Caption className={styles.summary}>
        <span>{flexibility}</span>
        <span>200 SEK</span>
      </Caption>
    </section>
  )
}