web/apps/scandic-web/components/SasTierComparison/index.tsx

"use client"
import Image from "next/image"

import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { Section } from "@/components/Section"

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

import type { ReactNode } from "react"

import type { SasTierComparison } from "@/types/trpc/routers/contentstack/partner"

type TierComparisonProps = {
  title?: string
  preamble?: string
  tierComparison: NonNullable<SasTierComparison>
}

export function SasTierComparison({
  title,
  preamble,
  tierComparison,
}: TierComparisonProps) {
  return (
    <Section className={styles.comparisonSection}>
      <div className={styles.header}>
        <Typography variant="Title/md" className={styles.title}>
          <h2>{title}</h2>
        </Typography>
        {preamble && <p className={styles.preamble}>{preamble}</p>}
      </div>
      <div>
        <div className={styles.columnHeaders}>
          <Image
            alt="Scandic logo"
            className={styles.scandicImage}
            src="/_static/img/scandic-logotype.svg"
            height={46}
            width={215}
            sizes="100vw"
          />
          <Image
            alt="SAS logo"
            className={styles.sasImage}
            src="/_static/img/sas/sas-logotype.svg"
            height={46}
            width={215}
            sizes="100vw"
          />
          <ColumnTitle>{tierComparison.scandic_column_title}</ColumnTitle>
          <ColumnTitle>{tierComparison.sas_column_title}</ColumnTitle>
        </div>
        <div className={styles.tierMatchList}>
          {tierComparison.tier_matches.map((tierMatch, i) => (
            <TierDetails key={i} tierMatch={tierMatch}>
              <JsonToHtml
                nodes={tierMatch.content.json?.children}
                embeds={[]}
                className={styles.htmlContent}
              />
            </TierDetails>
          ))}
        </div>
      </div>
      {tierComparison.cta?.link && (
        <Button theme="primaryLight" asChild className={styles.ctaButton}>
          <Link href={tierComparison.cta.link.url} color="white">
            {tierComparison.cta.title || tierComparison.cta.link.title}
          </Link>
        </Button>
      )}
    </Section>
  )
}

type TierMatch = NonNullable<SasTierComparison>["tier_matches"][number]

function TierDetails({
  children,
  tierMatch,
}: {
  children: React.ReactNode
  tierMatch: TierMatch
}) {
  return (
    <details className={styles.tierDetails} name="sas-scandic-tier-match">
      <summary className={styles.tierSummary}>
        <div className={styles.tierTitles}>
          <Typography
            variant="Body/Paragraph/mdBold"
            className={styles.tierTitle}
          >
            <p>{tierMatch.scandic_friends_tier_name}</p>
          </Typography>
          <div className={styles.comparisonIcon}>
            <MaterialIcon icon="compare_arrows" size={16} />
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              position: "relative",
            }}
          >
            <Typography
              variant="Body/Paragraph/mdBold"
              className={styles.tierTitle}
            >
              <p>{tierMatch.sas_eb_tier_name}</p>
            </Typography>
            <div className={styles.iconWrapper}>
              <MaterialIcon
                icon="keyboard_arrow_down"
                className={styles.chevron}
                color="Icon/Default"
                size={20}
              />
            </div>
          </div>
        </div>
      </summary>
      <div className={styles.tierContent}>
        <div className={styles.tierInfo}>
          <div className={styles.tierTitle}>
            <Typography variant="Title/Subtitle/md">
              <p className={styles.title}>{tierMatch.title}</p>
            </Typography>
          </div>
          <div>{children}</div>
        </div>
        {tierMatch.link?.href && (
          <ReadMoreLink href={tierMatch.link.href}>
            {tierMatch.link.title}
          </ReadMoreLink>
        )}
      </div>
    </details>
  )
}

function ReadMoreLink({
  href,
  children,
}: {
  href: string
  children: ReactNode
}) {
  return (
    <Link href={href} className={styles.link} weight="bold">
      {children}
      <MaterialIcon icon="arrow_forward" color="CurrentColor" />
    </Link>
  )
}

function ColumnTitle({ children }: { children?: ReactNode }) {
  return (
    <div className={styles.columnTitle}>
      <Caption type="bold" asChild>
        <span>{children}</span>
      </Caption>
    </div>
  )
}