import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
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"

export default async function JoinLoyaltyContact({
  block,
}: JoinLoyaltyContactProps) {
  const { formatMessage } = await getIntl()
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <Title level="h3">{block.title}</Title>
        <Image
          alt="Scandic Friends"
          className={styles.image}
          height={65}
          src="/_static/icons/scandic-friends.png"
          width={203}
        />
        {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
        <Button intent="primary">
          <span>{formatMessage({ id: "Join Scandic Friends" })}</span>
        </Button>
        <div className={styles.linkContainer}>
          <Link href="/login" className={styles.loginLink}>
            {formatMessage({ id: "Already a friend?" })} <br />
            {formatMessage({ id: "Click here to log in" })}
          </Link>
        </div>
      </div>
      {block.contact && <Contact contactBlock={block.contact} />}
    </div>
  )
}