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 Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
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} />
      <Grids.Stackable>
        {perks.map((perk) => (
          <article key={perk.id} className={styles.card}>
            <Chip>
              <Lock height={16} />
              {formatMessage({ id: "Level up to unlock" })}
            </Chip>
            <div>
              <BiroScript
                className={styles.level}
                color="primaryLightOnSurfaceAccent"
                textAlign="center"
                type="two"
              >
                {formatMessage({ id: "As our" })} {nextLevel}
              </BiroScript>{" "}
              <Subtitle color="pale" textAlign="center">
                {perk.explanation}
              </Subtitle>
            </div>
          </article>
        ))}
      </Grids.Stackable>
      <Button asChild intent="primary">
        <Link className={styles.link} href="#">
          {formatMessage({ id: "Explore all levels and benefits" })}
        </Link>
      </Button>
    </section>
  )
}