import { Check } from "react-feather"

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

import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/Title"

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

import { LevelCardProps } from "@/types/components/loyalty/blocks"

export default async function LoyaltyLevels() {
  const data = await serverClient().loyalty.levels.all()

  return (
    <section className={styles.container}>
      <div className={styles.cardContainer}>
        {data.map((level) => (
          <LevelCard key={level.tier} level={level} />
        ))}
      </div>
      <div className={styles.buttonContainer}>
        <Button intent="primary" asChild>
          <Link href={"/compare-all-levels"}>{_("Compare all levels")}</Link>
        </Button>
      </div>
    </section>
  )
}

function LevelCard({ level }: LevelCardProps) {
  return (
    <article className={styles.card}>
      <Title level="h4">{level.tier}</Title>
      <Image src={level.logo} alt={level.name} width={140} height={54} />
      <p className={styles.qualifications}>
        {level.requiredPoints} {_("or")} {level.requiredNights} {_("nights")}
      </p>
      {level.topBenefits.map((benefit) => (
        <p key={benefit} className={styles.benefits}>
          <Check className={styles.icon} />
          {benefit}
        </p>
      ))}
    </article>
  )
}