import React from 'react';
import styles from './style.less';

interface ProgressBarProps {
    percentage: number;
    totalBoxes: number;
    filledColor?: string; // 已点亮的颜色
    unfilledColor?: string; // 未点亮的颜色
}

const ProgressBar: React.FC<ProgressBarProps> = ({ percentage, totalBoxes, filledColor = '#00bfff', unfilledColor = '#e0e0e0' }) => {
    const filledBoxes = Math.ceil((percentage / 100) * totalBoxes);

    return (
        <div className={styles.progressBar}>
            <div className={styles.info}>
                <span className={styles.label}>缺药率 ≥ <i>{percentage}%</i></span>
                <span className={styles.label}>补药总数 <i>900盒</i></span>
            </div>

            <div className={styles.boxes}>
                {[...Array(totalBoxes)].map((_, i) => (
                    <div
                        key={i}
                        className={styles.box}
                        style={{ backgroundColor: i < filledBoxes ? filledColor : unfilledColor }}
                    ></div>
                ))}
            </div>
        </div>
    );
};

export default ProgressBar;
