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

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

import Header from "@/components/MyPages/Blocks/Header"
import Button from "@/components/TempDesignSystem/Button"
import CardGrid from "@/components/TempDesignSystem/CardGrid"

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 title={title} subtitle={subtitle} link={link} />
      <CardGrid variant="twoColumnGrid">
        {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>
        ))}
      </CardGrid>
      <div className={styles.buttonContainer}>
        <Button intent="primary" asChild>
          <Link href="#" className={styles.buttonText}>
            Explore all levels and benefits
          </Link>
        </Button>
      </div>
    </section>
  )
}