"use client"
import Link from "next/link"
import { useIntl } from "react-intl"

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

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

import ManageStay from "./ManageStay"

import styles from "./notCancelled.module.css"

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

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${location.latitude},${location.longitude}`
  return (
    <>
      <ManageStay />
      <Link className={styles.link} href={directionsUrl} target="_blank">
        <Typography variant="Body/Supporting text (caption)/smBold">
          <span>
            {intl.formatMessage({
              defaultMessage: "Find us",
            })}
          </span>
        </Typography>
        <MaterialIcon color="Icon/Interactive/Default" icon="location_on" />
      </Link>
    </>
  )
}