"use client"

import { useIntl } from "react-intl"

import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import Room from "./Room"
import TotalPrice from "./TotalPrice"

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

export default function Receipt() {
  const intl = useIntl()
  const rooms = useBookingConfirmationStore((state) => state.rooms)

  return (
    <section className={styles.receipt}>
      <Subtitle type="two">
        {intl.formatMessage({
          defaultMessage: "Booking summary",
        })}
      </Subtitle>

      {rooms.map((room, idx) => (
        <div key={room ? room.confirmationNumber : `loader-${idx}`}>
          {rooms.length > 1 ? (
            <Body color="uiTextHighContrast" textTransform={"bold"}>
              {intl.formatMessage(
                {
                  defaultMessage: "Room {roomIndex}",
                },
                { roomIndex: idx + 1 }
              )}
            </Body>
          ) : null}
          <Room roomIndex={idx} />
        </div>
      ))}

      <TotalPrice />
    </section>
  )
}
