import React from 'react';
import styles from '../styles/quiz.module.css';

interface ProgressBarProps {
  current: number;
  total: number;
  progress: number;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({ current, total, progress }) => {
  return (
    <div className={styles.progressWrapper}>
      <div className={styles.progressHeader}>
        <span className={styles.progressLabel}>Progress</span>
        <span className={styles.progressCount}>
          {current + 1} / {total}
        </span>
      </div>
      <div className={styles.progressTrack}>
        <div
          className={styles.progressFill}
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  );
};