import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon"

import { auth } from "@/auth"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { isValidSession } from "@/utils/session"

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

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

interface JoinScandicFriendsProps {
  content: JoinScandicFriends
}

export default async function JoinScandicFriends({
  content,
}: JoinScandicFriendsProps) {
  const session = await auth()
  const isLoggedIn = isValidSession(session)
  if (isLoggedIn) {
    return null
  }

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

  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}>
              <div>
                <BiroScript
                  color="red"
                  type="two"
                  tilted="small"
                  className={styles.scriptedText}
                >
                  {content.scripted_top_title}
                </BiroScript>
              </div>
              <Title level="h2" as="h4">
                {content.title}
              </Title>
            </header>
          ) : null}

          <Body>{content.preamble}</Body>

          {show_usp && usp.length ? (
            <ul className={styles.usp}>
              {usp.map((uspBullet) => (
                <Body asChild key={uspBullet}>
                  <li>{uspBullet}</li>
                </Body>
              ))}
            </ul>
          ) : null}
        </div>
        {content.has_primary_button ? (
          <div className={styles.buttonContainer}>
            <Button
              theme="base"
              intent="primary"
              size="small"
              fullWidth
              asChild
            >
              <Link
                href={primary_button.href}
                target={primary_button.openInNewTab ? "_blank" : undefined}
                color="none"
                size="regular"
              >
                {primary_button.title}
              </Link>
            </Button>
          </div>
        ) : null}
      </div>
    </div>
  )
}
