import { useIntl } from "react-intl"

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

import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import Button from "@/components/TempDesignSystem/Button"

export default function ViewAllAncillaries() {
  const intl = useIntl()
  const openModal = useAddAncillaryStore((state) => state.openModal)
  return (
    <Button
      theme="base"
      variant="icon"
      intent="text"
      size="small"
      onClick={openModal}
    >
      {intl.formatMessage({
        defaultMessage: "View all",
      })}
      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
    </Button>
  )
}