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

import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

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

import { Country } from "@/types/enums/country"

interface MeetingsSidebarProps {
  phoneNumber: string
  email?: string
  country: string
}

export default async function MeetingsSidebar({
  phoneNumber,
  email,
  country,
}: MeetingsSidebarProps) {
  const intl = await getIntl()

  return (
    <>
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Contact us",
            })}
          </h3>
        </Typography>
        <div className={styles.contactDetails}>
          <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
          {country === Country.Finland ? (
            <Typography
              variant="Body/Paragraph/mdRegular"
              className={styles.text}
            >
              <p>
                {intl.formatMessage({
                  defaultMessage: "Price 0,16 €/min + local call charges",
                })}
              </p>
            </Typography>
          ) : null}
          {email && (
            <Link textDecoration="underline" href={`mailto:${email}`}>
              {email}
            </Link>
          )}
        </div>
      </div>
    </>
  )
}
