interface ProgressBarProps {
  progress: number;
  onSeek: (ratio: number) => void;
}

export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
  return (
    <div
      className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer"
      onClick={(e) => {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        onSeek((e.clientX - rect.left) / rect.width);
      }}
    >
      <div className="origin-left h-full bg-white" style={{ transform: `scaleX(${progress || 0})` }} />
    </div>
  );
}