import Link from "next/link"

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

import Title from "@/components/Title"

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

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

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

  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>}

      <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.cardSubtitle}>{benefit.subtitle}</p>
          </Link>
        ))}
      </div>
    </section>
  )
}