"use client"

import { useIntl } from "react-intl"

import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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}>
      <Body asChild color="uiTextPlaceholder">
        <span>{intl.formatMessage({ id: "or" })}</span>
      </Body>
    </div>
  )
}

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

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

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <Title
        level="h4"
        as="h3"
        textTransform="regular"
        className={styles.contactBlockTitle}
      >
        {intl.formatMessage({ id: "Contact our memberservice" })}
      </Title>
      <Link
        href={`tel:${phone.replaceAll(" ", "")}`}
        textDecoration="underline"
      >
        {phone}
      </Link>
      <Link href="mailto:member@scandichotels.com" textDecoration="underline">
        member@scandichotels.com
      </Link>
    </div>
  )
}
