import { useIntl } from "react-intl"

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

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

import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface FinalConfirmationProps {
  booking: BookingConfirmation["booking"]
  stayDetails: {
    nightsText: string
    adultsText: string
    childrenText: string
  }
}

export function FinalConfirmation({
  booking,
  stayDetails,
}: FinalConfirmationProps) {
  const intl = useIntl()

  return (
    <>
      <div className={styles.modalText}>
        <Body color="uiTextHighContrast">
          {intl.formatMessage({
            id: "Are you sure you want to continue with the cancellation?",
          })}
        </Body>
      </div>
      <div className={styles.priceContainer}>
        <div className={styles.info}>
          <Caption color="uiTextHighContrast" type="bold">
            {intl.formatMessage({ id: "Cancellation cost" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {stayDetails.nightsText}, {stayDetails.adultsText}
            {booking.childrenAges?.length > 0
              ? `, ${stayDetails.childrenText}`
              : ""}
          </Caption>
        </div>
        <div className={styles.price}>
          <Subtitle color="burgundy" type="one">
            0 {booking.currencyCode}
          </Subtitle>
        </div>
      </div>
    </>
  )
}
