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

import { Lock } from "react-feather"
import Title from "../../../Title"
import Button from "@/components/TempDesignSystem/Button"
import Link from "next/link"

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

export default async function NextLevelBenefitsBlock() {
  const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()

  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title as="h4" level="h2" uppercase className={styles.title}>
          Next Level perks and benefits.
        </Title>
        <p className={styles.subtitle}>
          Here&apos;s a sneak peek at the extra benefits waiting just for you,
          when you level up to {nextLevel}
        </p>
      </header>
      <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.subtitle}>{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>
  )
}