"use client"

import { useIntl } from "react-intl"

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

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

export default function ChangeNameDisclaimer() {
  const intl = useIntl()

  return (
    <div className={styles.changeNameDisclaimer}>
      <MaterialIcon icon="info" />
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage(
            {
              id: "myPages.contactSupportForNameChange",
              defaultMessage:
                "Need to update your name? Please get in touch with member service at <phone>+46 8 517 517 00</phone> or <email>member@scandichotels.com</email>.",
            },
            {
              phone([str]) {
                return (
                  <TextLink
                    href={`tel:${str.replaceAll(" ", "")}`}
                    typography="Body/Supporting text (caption)/smBold"
                    isInline
                  >
                    {str}
                  </TextLink>
                )
              },
              email(str) {
                return (
                  <TextLink
                    href={`mailto:${str}`}
                    typography="Body/Supporting text (caption)/smBold"
                    isInline
                  >
                    {str}
                  </TextLink>
                )
              },
            }
          )}
        </p>
      </Typography>
    </div>
  )
}
