import CopyButton from "./CopyButton"
import Divider from "@/components/TempDesignSystem/Divider"
import Image from "@/components/Image"
import MembershipCardButton from "./MembershipCardButton"
import ProgressBar from "@/components/TempDesignSystem/ProgressBar"
import Title from "@/components/MyPages/Title"

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

import type { OverviewProps } from "@/types/components/myPages/overview"
import Link from "next/link"

export default function Overview({ user }: OverviewProps) {
  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title uppercase>Good morning {user.name}</Title>
      </header>
      <section className={styles.overview}>
        <section className={styles.friend}>
          <p className={styles.level}>Current level:</p>
          <Image
            alt="Good Friend"
            height={70}
            src="/good-friend.svg"
            width={228}
          />
          <h3 className={styles.name}>{user.name}</h3>
          <div className={styles.membershipContainer}>
            <p className={styles.membershipId}>{user.membershipId}</p>
            <CopyButton membershipId={user.membershipId} />
          </div>
          <MembershipCardButton />
        </section>
        <section className={styles.stats}>
          <div>
            <h4 className={styles.pointsTitle}>Total Points</h4>
            <Divider variant="dotted" />
            <p className={styles.points}>{user.points}</p>
          </div>
          <div className={styles.qualifyingPoints}>
            <h4 className={styles.pointsTitle}>Progress</h4>
            <Divider variant="dotted" />
            <div className={styles.pointsContainer}>
              <div className={styles.pointsProgress}>
                <Image
                  alt="Arrow Up Icon"
                  height={24}
                  src="/arrow_upward.svg"
                  width={24}
                />
                <p className={styles.point}>{user.qualifyingPoints}</p>
                <h5 className={styles.pointsProgressTitle}>
                  Qualifying points
                </h5>
              </div>
              <div className={styles.pointsProgress}>
                <Image
                  alt="Arrow Up Icon"
                  height={24}
                  src="/arrow_upward.svg"
                  width={24}
                />
                <p className={styles.point}>{user.nights}</p>
                <h5 className={styles.pointsProgressTitle}>Nights</h5>
              </div>
            </div>
          </div>
          <div className={styles.progress}>
            <ProgressBar className={styles.progressbar} progress={70} />
            <h4 className={styles.progressTitle}>Progress</h4>
            <p className={styles.pointsRemaining}>
              14 680 points until next level
            </p>
            <p className={styles.target}>Close friend</p>
          </div>
        </section>
        <Link className={styles.link} href="#">
          Go to my points
        </Link>
      </section>
    </section>
  )
}