"use client"
import { useIntl } from "react-intl"

import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"

import TotalPrice from "../Rooms/TotalPrice"
import GuaranteePaymentFailed from "./Actions/Upcoming/GuaranteePaymentFailed"
import Actions from "./Actions"
import BookingCode from "./BookingCode"
import Cancellations from "./Cancellations"
import Dates from "./Dates"
import GuaranteeInfo from "./GuaranteeInfo"
import Guests from "./Guests"
import Reference from "./Reference"
import Room from "./Room"

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

export function ReferenceCard() {
  const intl = useIntl()
  return (
    <div className={styles.referenceCard}>
      <Reference />
      <Dates />
      <Guests />
      <Room />
      <Cancellations />
      <GuaranteeInfo />
      <Divider />

      <div className={styles.row}>
        <Typography variant="Body/Lead text">
          <p>
            {intl.formatMessage({
              id: "common.total",
              defaultMessage: "Total",
            })}
          </p>
        </Typography>
        <TotalPrice />
      </div>
      <BookingCode />
      <Actions />
      <GuaranteePaymentFailed />
    </div>
  )
}