import { serverClient } from "@/lib/trpc/server"

import Header from "@/components/MyPages/Blocks/Header"
import Grids from "@/components/TempDesignSystem/Grids"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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()
  const { formatMessage } = await getIntl()
  // 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 = Array.of(...Array(3).keys())

  return (
    <section className={styles.container}>
      <Header title={title} link={link} subtitle={subtitle} />
      <Grids.Scrollable>
        {currentLevel.map((benefit) => (
          <Link className={styles.card} href="#" key={benefit}>
            <BiroScript
              className={styles.script}
              color="primaryLightOnSurfaceAccent"
              type="two"
            >
              {formatMessage({ id: "As our Close Friend" })}
            </BiroScript>
            <Title as="h5" level="h3" textAlign="center">
              {formatMessage({
                id: "Free soft drink voucher for the kids when staying",
              })}
            </Title>
          </Link>
        ))}
      </Grids.Scrollable>
    </section>
  )
}