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

import Title from "../Title"

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

export default function Progress() {
  return (
    <section className={styles.progress}>
      <header className={styles.header}>
        <Title>14 680 points until next level</Title>
        <Title>Progress</Title>
      </header>
      <Divider className={styles.divider} variant="dotted" />
      <div className={styles.container}>
        <p className={styles.nextLevel}>14 680 points until next level</p>
        <p className={styles.target}>Close friend</p>
      </div>
    </section>
  )
}