"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 "@scandic-hotels/design-system/Modal"

import PriceDetailsTable, {
  type PriceDetailsTableProps,
} from "./PriceDetailsTable"

function Trigger({ title }: { title: string }) {
  return (
    <Button
      variant="Text"
      size="Medium"
      typography="Body/Paragraph/mdBold"
      wrapping={false}
    >
      {title}
      <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
    </Button>
  )
}

export default function PriceDetailsModal(props: PriceDetailsTableProps) {
  const intl = useIntl()
  const title = intl.formatMessage({
    id: "common.priceDetails",
    defaultMessage: "Price details",
  })
  return (
    <Modal title={title} trigger={<Trigger title={title} />}>
      <PriceDetailsTable {...props} />
    </Modal>
  )
}