web/components/HotelReservation/PriceDetailsModal/index.tsx

import { useIntl } from "react-intl"

import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import PriceDetailsTable from "./PriceDetailsTable"

import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
import type { Price } from "@/types/components/hotelReservation/price"
import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"

interface PriceDetailsModalProps {
  fromDate: string
  toDate: string
  rooms: {
    adults: number
    childrenInRoom: Child[] | undefined
    roomType: string
    roomPrice: RoomPrice
    bedType?: BedTypeSchema
    breakfast?: BreakfastPackage | false
  }[]
  totalPrice: Price
  vat: number
  toggleModal: () => void
}

export default function PriceDetailsModal({
  fromDate,
  toDate,
  rooms,
  totalPrice,
  vat,
  toggleModal,
}: PriceDetailsModalProps) {
  const intl = useIntl()

  return (
    <Modal
      title={intl.formatMessage({ id: "Price details" })}
      trigger={
        <Button intent="text" onPress={toggleModal}>
          <Caption color="burgundy">
            {intl.formatMessage({ id: "Price details" })}
          </Caption>
          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
        </Button>
      }
    >
      <PriceDetailsTable
        fromDate={fromDate}
        toDate={toDate}
        rooms={rooms}
        totalPrice={totalPrice}
        vat={vat}
      />
    </Modal>
  )
}