import Divider from "@/components/TempDesignSystem/Divider"
import Image from "@/components/Image"

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

import type { QualifyingPointsProps } from "@/types/components/myPages/myPage/qualifyingPoints"

export default function QualifyingPoints({ user }: QualifyingPointsProps) {
  return (
    <div className={styles.qualifyingPoints}>
      <h4 className={styles.title}>Progress</h4>
      <Divider variant="dotted" />
      <div className={styles.container}>
        <div className={styles.points}>
          <Image
            alt="Arrow Up Icon"
            height={24}
            src="/arrow_upward.svg"
            width={24}
          />
          <p className={styles.point}>{user.qualifyingPoints}</p>
          <h5 className={styles.pointTitle}>Qualifying points</h5>
        </div>
        <div className={styles.points}>
          <Image
            alt="Arrow Up Icon"
            height={24}
            src="/arrow_upward.svg"
            width={24}
          />
          <p className={styles.point}>{user.nights}</p>
          <h5 className={styles.pointTitle}>Nights</h5>
        </div>
      </div>
    </div>
  )
}