import { _ } from "@/lib/translation"

import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"

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

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

export default function Challenges({ journeys, victories }: ChallengesProps) {
  return (
    <section className={styles.challenges}>
      <header className={styles.header}>
        <Title level="h2">{_("Your Challenges Conquer & Earn!")}</Title>
      </header>
      <section className={styles.section}>
        <header>
          <Title level="h3">{_("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">{_("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>
  )
}