import { serverClient } from "@/lib/trpc/server"
import Title from "../../../Title"
import styles from "./current.module.css"
import Link from "next/link"

export default async function CurrentBenefitsBlock() {
  const benefits = await serverClient().user.benefits.current()

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