import styles from '../../pages/HomePage.module.css'

type HighScoreCardProps = {
  hiScoreLoading: boolean
  topScore: number | null
  topName: string | null
}

export function HighScoreCard({ hiScoreLoading, topScore, topName }: HighScoreCardProps) {
  return (
    <article className={styles.scoreCard}>
      <p className={styles.scoreEyebrow}>GLOBAL</p>
      <p className={styles.scoreTitle}>HI SCORE</p>
      <p className={styles.scoreValue}>
        {hiScoreLoading ? '···' : topScore != null ? topScore.toLocaleString() : '-'}
      </p>
      <p className={styles.scorePlayer}>* {topName ?? 'ACE_DANCER'}</p>
    </article>
  )
}
