import { useIntl } from "react-intl"

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

import { ChevronRightSmallIcon } from "@/components/Icons"
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({ id: "View all" })}
      <ChevronRightSmallIcon
        width={20}
        height={20}
        color="baseButtonTextOnFillNormal"
      />
    </Button>
  )
}
