import Link from "next/link"

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

import Title from "@/components/Title"

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

export type CurrentLevelProps = {
  title: string
  preamble?: string
}

export default async function CurrentBenefitsBlock({
  title,
  preamble,
}: CurrentLevelProps) {
  const benefits = await serverClient().user.benefits.current()

  return (
    <section>
      <header className={styles.header}>
        <Title as="h4" level="h2" className={styles.title} uppercase>
          {title}
        </Title>
        {preamble && <p className={styles.preamble}>{preamble}</p>}
      </header>

      <div className={styles.cardContainer}>
        {benefits.map((benefit) => (
          <Link href={benefit.href} key={benefit.id} className={styles.card}>
            <Title as="h5" level="h3" className={styles.title}>
              <span className={styles.value}>{benefit.value}</span>{" "}
              {benefit.explanation}
            </Title>
            <p className={styles.subtitle}>{benefit.subtitle}</p>
          </Link>
        ))}
      </div>
    </section>
  )
}