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

import { isLoggedInUser } from "@/utils/isLoggedInUser"

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

import type { JoinScandicFriends } from "@/types/trpc/routers/contentstack/startPage"

interface JoinScandicFriendsProps {
  content: JoinScandicFriends
  headingLevel?: "h1" | "h2"
}

export default async function JoinScandicFriends({
  content,
  headingLevel = "h2",
}: JoinScandicFriendsProps) {
  const isLoggedIn = await isLoggedInUser()
  if (isLoggedIn) {
    return null
  }

  const { show_header, show_usp, usp, primary_button } = content
  const Hx = headingLevel

  return (
    <div className={styles.container}>
      <div className={styles.iconContainer}>
        {content.image ? (
          <Image
            src={content.image.url}
            alt={content.image.title}
            width={384}
            height={384}
          />
        ) : (
          <SurpriseIcon width="100%" height="100%" />
        )}
      </div>
      <div className={styles.content}>
        <div className={styles.textContent}>
          {show_header ? (
            <header className={styles.header}>
              {content.scripted_top_title ? (
                <Typography variant="Title/Decorative/md">
                  <span className={styles.scriptedText}>
                    {content.scripted_top_title}
                  </span>
                </Typography>
              ) : null}
              <Typography variant="Title/xs">
                <Hx className={styles.heading}>{content.title}</Hx>
              </Typography>
            </header>
          ) : null}

          <Typography variant="Body/Paragraph/mdRegular">
            <p>{content.preamble}</p>
          </Typography>

          {show_usp && usp.length ? (
            <ul className={styles.usp}>
              {usp.map((uspBullet) => (
                <Typography key={uspBullet} variant="Body/Paragraph/mdRegular">
                  <li>{uspBullet}</li>
                </Typography>
              ))}
            </ul>
          ) : null}
        </div>
        {content.has_primary_button ? (
          <ButtonLink
            variant="Primary"
            size="sm"
            href={primary_button.href}
            target={primary_button.openInNewTab ? "_blank" : undefined}
            className={styles.primaryButton}
          >
            {primary_button.title}
          </ButtonLink>
        ) : null}
      </div>
    </div>
  )
}