import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"

export default async function Challenges({
  journeys,
  victories,
}: ChallengesProps) {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.challenges}>
      <header className={styles.header}>
        <Title level="h2">
          {formatMessage({ id: "Your Challenges Conquer & Earn!" })}
        </Title>
      </header>
      <section className={styles.section}>
        <header>
          <Title level="h3">{formatMessage({ id: "On your journey" })}</Title>
        </header>
        <section className={styles.journeys}>
          {journeys.map((journey) => (
            <article className={styles.journey} key={journey.title}>
              <p className={styles.subtitle}>{journey.tag}</p>
              <h4 className={styles.title}>{journey.title}</h4>
            </article>
          ))}
        </section>
      </section>
      <aside className={styles.aside}>
        <header>
          <Title level="h3">
            {formatMessage({ id: "Previous victories" })}
          </Title>
        </header>
        <section className={styles.victories}>
          {victories.map((victory) => (
            <article className={styles.victory} key={victory.title}>
              <div className={styles.circle}>
                <Image
                  alt="Checkmark Icon"
                  height={9}
                  src="/_static/icons/check.svg"
                  width={12}
                />
              </div>
              <p className={styles.subtitle}>{victory.tag}</p>
              <h4 className={styles.title}>{victory.title}</h4>
            </article>
          ))}
        </section>
      </aside>
    </section>
  )
}