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

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

import { useMyStayStore } from "@/stores/my-stay"

import ManageStay from "./ManageStay"

export default function Upcoming() {
  const intl = useIntl()
  const hotel = useMyStayStore((state) => state.hotel)

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
    `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
  )}`
  return (
    <>
      <ManageStay />
      <ButtonLink
        variant="Secondary"
        size="Medium"
        target="_blank"
        href={directionsUrl}
        typography="Body/Supporting text (caption)/smBold"
      >
        <span>
          {intl.formatMessage({
            id: "myStay.referenceCard.actions.findUs",
            defaultMessage: "Find us",
          })}
        </span>
        <MaterialIcon color="CurrentColor" icon="location_on" />
      </ButtonLink>
    </>
  )
}