veza/apps/web/src/components/player/audio-player/AudioPlayerProgress.tsx

import { Slider } from '@/components/ui/slider';
import { formatTime } from './types';

interface AudioPlayerProgressProps {
  currentTime: number;
  duration: number;
  onSeek: (value: number[]) => void;
  /** "default" shows time labels on sides; "minimal" renders a thin full-width bar (for top-of-player placement). */
  variant?: 'default' | 'minimal';
}

export function AudioPlayerProgress({
  currentTime,
  duration,
  onSeek,
  variant = 'default',
}: AudioPlayerProgressProps) {
  if (variant === 'minimal') {
    return (
      <div className="w-full group">
        <Slider
          value={[currentTime]}
          max={duration || 1}
          step={0.1}
          onValueChange={onSeek}
          className="w-full"
        />
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 flex-1">
      <span className="text-xs text-muted-foreground w-12 text-right">
        {formatTime(currentTime)}
      </span>
      <Slider
        value={[currentTime]}
        max={duration || 1}
        step={0.1}
        onValueChange={onSeek}
        className="flex-1"
      />
      <span className="text-xs text-muted-foreground w-12">
        {formatTime(duration)}
      </span>
    </div>
  );
}