"use client"

import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
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(
            {
              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 (
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <Link
                      href={`tel:${str.replaceAll(" ", "")}`}
                      textDecoration="underline"
                      size="none"
                    >
                      {str}
                    </Link>
                  </Typography>
                )
              },
              email(str) {
                return (
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <Link
                      href={`mailto:${str}`}
                      textDecoration="underline"
                      size="none"
                    >
                      {str}
                    </Link>
                  </Typography>
                )
              },
            }
          )}
        </p>
      </Typography>
    </div>
  )
}