"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 { hotel } = useMyStayStore((state) => state)

  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 />
      <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>
    </>
  )
}