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 { Hotel } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface CancelStayConfirmationProps {
  hotel: Hotel
  booking: BookingConfirmation["booking"]
  stayDetails: {
    checkInDate: string
    checkOutDate: string
    nightsText: string
    adultsText: string
    childrenText: string
  }
}

export function CancelStayConfirmation({
  hotel,
  booking,
  stayDetails,
}: CancelStayConfirmationProps) {
  const intl = useIntl()

  return (
    <>
      <div className={styles.modalText}>
        <Body color="uiTextHighContrast">
          {intl.formatMessage(
            {
              id: "Are you sure you want to cancel your stay at {hotel} from {checkInDate} to {checkOutDate}? This can't be reversed.",
            },
            {
              hotel: hotel.name,
              checkInDate: stayDetails.checkInDate,
              checkOutDate: stayDetails.checkOutDate,
            }
          )}
        </Body>
        <Caption color="uiTextHighContrast">
          {intl.formatMessage({ id: "No charges were made." })}
        </Caption>
      </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>
    </>
  )
}
