web/components/SasTierComparison/index.tsx

"use client"
import { type Key, useState } from "react"

import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"

import { ArrowRightIcon, CompareArrowsIcon } from "../Icons"
import SectionContainer from "../Section/Container"
import SectionHeader from "../Section/Header"
import Button from "../TempDesignSystem/Button"
import Select from "../TempDesignSystem/Select"

import styles from "./sas-tier-comparison.module.css"

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

type SasTierComparisonContent = SasTierComparison["sas_tier_comparison"]

type TierComparisonProps = {
  content: SasTierComparisonContent
  firstItem: boolean
}

const scandicSasTierMappings: [string[], string[]][] = [
  [["L1", "L2", "L3"], ["Basic"]],
  [["L4"], ["Silver"]],
  [["L5"], ["Gold"]],
  [
    ["L6", "L7"],
    ["Diamond", "Pandion"],
  ],
]

export function SasTierComparison({ content, firstItem }: TierComparisonProps) {
  const comparisonContent = content.sasTierComparison

  const scandic = comparisonContent?.scandic_friends
  const sas = comparisonContent?.sas_eb

  const [activeScandicTierCode, setActiveScandicTierCode] = useState(
    scandic?.tiers.at(0)?.tier_code ?? ""
  )
  const [activeSasTierCode, setActiveSasTierCode] = useState(
    sas?.tiers.at(0)?.tier_code ?? ""
  )

  if (!scandic || !sas) return null

  const onChangeScandic = (k: Key) => {
    const key = k.toString()
    setActiveScandicTierCode(k.toString())

    const mapping = scandicSasTierMappings.find(([tierMapping]) =>
      tierMapping.includes(key)
    )
    if (!mapping) return
    const sasTierCode = mapping[1][0]
    setActiveSasTierCode(sasTierCode)
  }

  const onChangeSas = (k: Key) => {
    const key = k.toString()
    setActiveSasTierCode(key)

    const mapping = scandicSasTierMappings.find(([_, tierMapping]) =>
      tierMapping.includes(key)
    )
    if (!mapping) return
    const scandicTierCode = mapping[0][0]
    setActiveScandicTierCode(scandicTierCode)
  }

  return (
    <SectionContainer className={styles.comparisonSection}>
      <div className={styles.header}>
        <SectionHeader title={comparisonContent.title} topTitle={firstItem} />
        {comparisonContent.preamble && (
          <p className={styles.preamble}>{comparisonContent.preamble}</p>
        )}
      </div>
      <div className={styles.comparisonCard}>
        <div className={styles.comparisonContainer}>
          <div className={styles.comparisonBrand}>
            <Title level="h3" textTransform="regular">
              {scandic.title}
            </Title>
            <Select
              name="friends-level"
              label={scandic.label}
              aria-label={scandic.label}
              items={scandic.tiers.map((tier) => ({
                label: tier.tier_label,
                value: tier.tier_code,
              }))}
              value={activeScandicTierCode}
              onSelect={onChangeScandic}
            />
            {scandic.read_more_link && (
              <ReadMoreLink
                href={scandic.read_more_link.href}
                title={scandic.read_more_link.title}
              />
            )}
          </div>
          <div className={styles.comparisonIcon}>
            <CompareArrowsIcon width={24} height={24} />
          </div>
          <div className={styles.comparisonBrand}>
            <Title level="h3" textTransform="regular">
              {sas.title}
            </Title>
            <Select
              name="eb-level"
              label={sas.label}
              aria-label={sas.label}
              items={sas.tiers.map((tier) => ({
                label: tier.tier_label,
                value: tier.tier_code,
              }))}
              value={activeSasTierCode}
              onSelect={onChangeSas}
            />
            {sas.read_more_link && (
              <ReadMoreLink
                href={sas.read_more_link.href}
                title={sas.read_more_link.title}
              />
            )}
          </div>
        </div>
        {comparisonContent.cta && (
          <div className={styles.ctaContainer}>
            <Button
              asChild
              intent="primary"
              size="small"
              theme="base"
              className={styles.ctaLink}
            >
              <Link color="none" href={comparisonContent.cta.href}>
                {comparisonContent.cta.title}
              </Link>
            </Button>
          </div>
        )}
      </div>
    </SectionContainer>
  )
}

function ReadMoreLink({ href, title }: { href: string; title: string }) {
  return (
    <Link
      href={href}
      variant="underscored"
      className={styles.link}
      color="peach80"
    >
      {title}
      <ArrowRightIcon color="peach80" />
    </Link>
  )
}