import Link from "next/link"
import { Lock } from "react-feather"

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

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

import styles from "./next.module.css"
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

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

  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title as="h3" level="h2" uppercase className={styles.title}>
          {title}
          {link && (
            <Link className={styles.link} href={link.href}>
              {link.text}
            </Link>
          )}
        </Title>
      </header>
      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
      <div className={styles.cardContainer}>
        {perks.map((perk) => (
          <article key={perk.id} className={styles.card}>
            <Button type="button" intent="secondary" disabled>
              <Lock height={16} />
              Level up to unlock
            </Button>
            <div>
              <span className={styles.level}>As our {nextLevel}</span>{" "}
              <p className={styles.cardSubtitle}>{perk.explanation}</p>
            </div>
          </article>
        ))}
      </div>
      <div className={styles.buttonContainer}>
        <Button intent="primary" asChild>
          <Link href="#" className={styles.buttonText}>
            Explore all levels and benefits
          </Link>
        </Button>
      </div>
    </section>
  )
}