import Link from "next/link"

import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"

import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Title from "@/components/Title"

import levelsData from "../data"

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

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function CurrentBenefitsBlock({
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  // TODO: level should be fetched from the `user` object once available
  // TAKE NOTE: we need clarification on how benefits stack from different levels
  // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
  // we might have to add a new boolean property "exclusive" or similar
  const userLevel = 1

  const currentLevel = levelsData[Lang.en].levels.find(
    (level) => level.tier === userLevel
  )
  if (!currentLevel) {
    //  TODO: handle this case?
    return null
  }

  return (
    <section className={styles.container}>
      <header className={styles.header}>
        {title && (
          <Title
            as="h3"
            level="h2"
            weight={"medium"}
            className={styles.title}
            uppercase
          >
            {title}
          </Title>
        )}
        {link && (
          <Link className={styles.link} href={link.href}>
            {link.text}
          </Link>
        )}
      </header>
      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}

      <CardGrid>
      {currentLevel.benefits.map((benefit, idx) => (
          <Link
            href={benefit.href}
            key={`${currentLevel}-${idx}`}
            className={styles.card}
          >
            <Title as="h5" level="h3" className={styles.title}>
              <span className={styles.value}>{benefit.value}</span>
              {benefit.explaination ? ` ${benefit.explaination}` : ""}
            </Title>
            <p className={styles.cardSubtitle}>{benefit.description}</p>
          </Link>
        ))}
      </CardGrid>
    </section>
  )
}