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

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

import Modal from "@/components/Modal"

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

  return (
    <Modal
      title={intl.formatMessage({ id: "Price details" })}
      trigger={
        <Button
          variant="Text"
          typography="Body/Supporting text (caption)/smBold"
          wrapping={false}
        >
          {intl.formatMessage({ id: "Price details" })}
          <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
        </Button>
      }
    >
      {children}
    </Modal>
  )
}