// 이 파일이 하는 일: "몇 개 중 몇 개 완료" 진행률을 막대로 보여주는 작은 컴포넌트.
export default function ProgressBar({ value, total }) {
  // 학습 포인트: total이 0일 때 0으로 나누면 NaN이 된다. 항상 방어할 것.
  const percent = total > 0 ? Math.round((value / total) * 100) : 0;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <span className="muted" style={{ fontSize: 13 }}>이번 주 진행률</span>
        <span style={{ fontSize: 13, fontWeight: 700 }}>
          {value} / {total} ({percent}%)
        </span>
      </div>
      <div className="progress-track">
        <div className="progress-fill" style={{ width: `${percent}%` }} />
      </div>
    </div>
  );
}
