veza/apps/web/src/features/player/components/TimeDisplay.tsx

/**
 * Composant TimeDisplay
 * Affiche le temps actuel et la durée totale au format MM:SS
 */

import { formatTime } from '../services/playerService';
import { cn } from '@/lib/utils';

export interface TimeDisplayProps {
  currentTime: number;
  duration: number;
  className?: string;
  showSeparator?: boolean;
  separator?: string;
}

export function TimeDisplay({
  currentTime,
  duration,
  className,
  showSeparator = true,
  separator = ' / ',
}: TimeDisplayProps) {
  const formattedCurrentTime = formatTime(currentTime);
  const formattedDuration = formatTime(duration);

  return (
    <div
      className={cn(
        'flex items-center text-sm text-kodo-content-dim dark:text-kodo-content-dim',
        className,
      )}
      role="timer"
      aria-live="polite"
      aria-atomic="true"
    >
      <span aria-label={`Temps actuel: ${formattedCurrentTime}`}>
        {formattedCurrentTime}
      </span>
      {showSeparator && (
        <span className="mx-1" aria-hidden="true">
          {separator}
        </span>
      )}
      <span aria-label={`Durée totale: ${formattedDuration}`}>
        {formattedDuration}
      </span>
    </div>
  );
}

export default TimeDisplay;