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"

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

export default async function NextLevelBenefitsBlock({
  title,
  preamble,
}: NextLevelProps) {
  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}>
          {title}
        </Title>
        {preamble && <p className={styles.preamble}>{preamble}</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>
  )
}