"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"

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>
          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
        </Button>
      }
    >
      {children}
    </Modal>
  )
}
