"use client"

import { useIntl } from "react-intl"

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

import Link from "@/components/TempDesignSystem/Link"

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

export function SASModal({ children }: { children: React.ReactNode }) {
  return <section className={styles.container}>{children}</section>
}

export function SASModalDivider() {
  const intl = useIntl()

  return (
    <div className={styles.divider}>
      <Typography variant="Body/Paragraph/mdRegular">
        <span>
          {intl.formatMessage({
            defaultMessage: "or",
          })}
        </span>
      </Typography>
    </div>
  )
}

export function SASModalContactBlock() {
  const intl = useIntl()

  const phone = intl.formatMessage({
    defaultMessage: "+46 8 517 517 00",
  })

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <Typography variant="Title/Subtitle/md">
        <h4 className={styles.contactBlockTitle}>
          {intl.formatMessage({
            defaultMessage: "Contact us",
          })}
        </h4>
      </Typography>
      <Link
        href={`tel:${phone.replaceAll(" ", "")}`}
        textDecoration="underline"
      >
        {phone}
      </Link>
      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
      <Link href="mailto:member@scandichotels.com" textDecoration="underline">
        member@scandichotels.com
      </Link>
    </div>
  )
}
