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 Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

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()
  const { formatMessage } = await getIntl()
  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}>
            <div className={styles.cardInner}>
              {/*TODO: These label buttons will be rebuilt as "Chip" (Badge?) components according to design.*/}
              <Button
                type="button"
                size="small"
                className={styles.chip}
                disabled
              >
                <Lock height={16} />
                Level up to unlock
              </Button>
              <div className={styles.mainContentContainer}>
                <span className={styles.level}>As our {nextLevel}</span>{" "}
                <p className={styles.cardSubtitle}>{perk.explanation}</p>
              </div>
            </div>
          </article>
        ))}
      </CardGrid>
      <div className={styles.buttonContainer}>
        <Button asChild intent="primary">
          <Link href="#">
            {formatMessage({ id: "Explore all levels and benefits" })}
          </Link>
        </Button>
      </div>
    </section>
  )
}
