"use client"
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"
import type { Packages } from "@/types/requests/packages"

interface PriceDetailsModalProps {
  fromDate: string
  toDate: string
  rooms: {
    adults: number
    childrenInRoom: Child[] | undefined
    roomType: string
    roomPrice: RoomPrice
    bedType?: BedTypeSchema
    breakfast?: BreakfastPackage | false
    roomFeatures?: Packages | null
  }[]
  totalPrice: Price
  vat: number
}

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

  return (
    <Modal
      title={intl.formatMessage({ id: "Price details" })}
      trigger={
        <Button intent="text">
          <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>
  )
}