import { login } from "@/constants/routes/handleAuth"

import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import Contact from "./Contact"

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

import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
import { LangParams } from "@/types/params"

export default async function JoinLoyaltyContact({
  block,
  lang,
}: JoinLoyaltyContactProps & LangParams) {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.container}>
      <article className={styles.wrapper}>
        <Title as="h4" level="h3">
          {block.title}
        </Title>
        <ScandicFriends color="primaryLightOnSurfaceAccent" />
        {block.preamble ? (
          <Body textAlign="center">{block.preamble}</Body>
        ) : null}
        <Button asChild className={styles.link} intent="primary">
          <Link href="#">{formatMessage({ id: "Join Scandic Friends" })}</Link>
        </Button>
        <Link href={login[lang]}>
          <Footnote textAlign="center" textTransform="bold">
            {formatMessage({ id: "Already a friend?" })} <br />
            {formatMessage({ id: "Click here to log in" })}
          </Footnote>
        </Link>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
    </section>
  )
}
