import { useIntl } from "react-intl"

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

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

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: "common.seeAll",
        defaultMessage: "See all",
      })}
      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
    </Button>
  )
}