import React, { useState, useEffect } from 'react';
import styles from './index.module.css';

export default function ReadingProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    function handleScroll() {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      if (docHeight > 0) {
        setProgress((scrollTop / docHeight) * 100);
      }
    }
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className={styles.wrapper}>
      <div className={styles.progressBar} style={{ width: `${progress}%` }} />
      {progress > 0 && (
        <span className={styles.percent}>{Math.round(progress)}%</span>
      )}
    </div>
  );
}
