interface SegmentedProgressBarProps {
  totalSegments: number;
  currentIndex: number;
  segmentProgress: number;
  onSeek: (ratio: number) => void;
}

export function SegmentedProgressBar({
  totalSegments,
  currentIndex,
  segmentProgress,
  onSeek,
}: SegmentedProgressBarProps) {
  return (
    <div
      className="relative h-1.5 cursor-pointer"
      onClick={(e) => {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        onSeek((e.clientX - rect.left) / rect.width);
      }}
    >
      <div className="flex gap-1.5 h-full">
        {Array.from({ length: totalSegments }).map((_, i) => {
          let fill = 0;
          if (i < currentIndex) fill = 1;
          else if (i === currentIndex) fill = segmentProgress;
          return (
            <div
              key={i}
              aria-label={`第 ${i + 1} 段`}
              className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
            >
              <div className="h-full origin-left bg-white" style={{ transform: `scaleX(${fill})` }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}