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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"

export default function PriceDetailsModal({
  children,
}: React.PropsWithChildren) {
  const intl = useIntl()

  return (
    <Modal
      title={intl.formatMessage({ id: "Price details" })}
      trigger={
        <Button intent="text">
          <Caption color="burgundy">
            {intl.formatMessage({ id: "Price details" })}
          </Caption>
          <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
        </Button>
      }
    >
      {children}
    </Modal>
  )
}