veza/apps/web/src/components/feedback/Progress.tsx

import { useMemo } from 'react';
import { cn } from '@/lib/utils';

export interface ProgressProps {
  value: number; // 0-100
  max?: number;
  variant?: 'linear' | 'circular';
  showLabel?: boolean;
  label?: string;
  color?: string;
  className?: string;
}

/**
 * Composant Progress pour afficher la progression d'une opération.
 */
export function Progress({
  value,
  max = 100,
  variant = 'linear',
  showLabel = false,
  label,
  color,
  className,
}: ProgressProps) {
  const percentage = useMemo(() => {
    const clampedValue = Math.max(0, Math.min(value, max));
    return Math.round((clampedValue / max) * 100);
  }, [value, max]);

  if (variant === 'circular') {
    const radius = 20;
    const circumference = 2 * Math.PI * radius;
    const strokeDashoffset = circumference - (percentage / 100) * circumference;

    return (
      <div
        className={cn(
          'relative inline-flex items-center justify-center',
          className,
        )}
      >
        <svg
          className="w-16 h-16 transform -rotate-90"
          viewBox="0 0 50 50"
          role="progressbar"
          aria-valuenow={value}
          aria-valuemin={0}
          aria-valuemax={max}
        >
          {/* Background circle */}
          <circle
            cx="25"
            cy="25"
            r={radius}
            fill="none"
            stroke="currentColor"
            strokeWidth="4"
            className="text-muted"
          />
          {/* Progress circle */}
          <circle
            cx="25"
            cy="25"
            r={radius}
            fill="none"
            stroke={color || 'currentColor'}
            strokeWidth="4"
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            className={cn(
              'transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
              !color && 'text-primary',
            )}
            style={color ? { stroke: color } : undefined}
          />
        </svg>
        {showLabel && (
          <span className="absolute inset-0 flex items-center justify-center text-sm font-medium">
            {percentage}%
          </span>
        )}
      </div>
    );
  }

  return (
    <div className={cn('w-full', className)}>
      {(showLabel || label) && (
        <div className="flex justify-between mb-1 text-sm">
          {label && <span className="text-muted-foreground">{label}</span>}
          {showLabel && (
            <span className="text-muted-foreground font-medium">
              {percentage}%
            </span>
          )}
        </div>
      )}
      <div
        className="w-full bg-muted rounded-full h-2 overflow-hidden"
        role="progressbar"
        aria-valuenow={value}
        aria-valuemin={0}
        aria-valuemax={max}
        aria-label={
          label ? `${label}: ${percentage}%` : `Progress: ${percentage}%`
        }
      >
        <div
          className={cn(
            'h-full rounded-full transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
            !color && 'bg-primary',
          )}
          style={{
            width: `${percentage}%`,
            backgroundColor: color,
          }}
        />
      </div>
    </div>
  );
}