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

import { ScandicFriends } from "@/components/Levels"
import { getIntl } from "@/i18n"
import { isLoggedInUser } from "@/utils/isLoggedInUser"

import Contact from "./Contact"
import { LoyaltyLoginButton } from "./LoyaltyLoginButton"
import ReadMore from "./ReadMore"

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

import type { JoinLoyaltyContactProps } from "@/types/components/sidebar/joinLoyaltyContact"

export default async function JoinLoyaltyContact({
  block,
}: JoinLoyaltyContactProps) {
  const [intl, isLoggedIn] = await Promise.all([getIntl(), isLoggedInUser()])

  if (isLoggedIn) {
    return null
  }

  return (
    <section className={styles.joinLoyaltyContainer}>
      <article className={styles.wrapper}>
        {block.title ? (
          <Typography variant={"Title/Subtitle/md"}>
            <h4 className={styles.title}>{block.title}</h4>
          </Typography>
        ) : null}
        <ScandicFriends color="red" />
        {block.preamble ? (
          <Typography variant={"Body/Paragraph/mdRegular"}>
            <p className={styles.preamble}>{block.preamble}</p>
          </Typography>
        ) : null}
        {block.button ? (
          <Typography variant={"Body/Paragraph/mdBold"}>
            <ButtonLink
              className={styles.button}
              size={"Small"}
              wrapping
              href={block.button.href}
              target={block.button.openInNewTab ? "_blank" : "_self"}
            >
              {block.button.title}
            </ButtonLink>
          </Typography>
        ) : null}
        <section className={styles.loginContainer}>
          <Typography variant={"Body/Paragraph/mdRegular"}>
            <p>
              {intl.formatMessage({
                defaultMessage: "Already a friend?",
              })}
            </p>
          </Typography>
          <LoyaltyLoginButton />
        </section>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
      <ReadMore />
    </section>
  )
}