import styles from "./ProgressBar.module.css";

type ProgressBarTone = "ok" | "wn" | "ng" | "ac" | "pr";

interface ProgressBarProps {
  /** 0〜100の割合。呼び出し側は生値を渡してよい（丸めは表示幅に影響しないため不要） */
  percent: number;
  tone?: ProgressBarTone;
}

/**
 * モック521〜523行のバー相当。F-01のスケジュール進捗、F-04のKPI4列で共用する。
 *
 * ★呼び出し元が null/未定義を渡さない前提だが、0除算由来のNaN/Infinityが
 *   万一渡ってもバーが壊れないよう、ここで最終防御として0にクランプする★
 */
export function ProgressBar({ percent, tone = "ok" }: ProgressBarProps) {
  const safePercent = Number.isFinite(percent) ? percent : 0;
  const clamped = Math.max(0, Math.min(100, safePercent));
  return (
    <div className={styles.track}>
      <div
        className={`${styles.fill} ${styles[tone]}`}
        style={{ width: `${clamped}%` }}
      />
    </div>
  );
}