/**
 * Progress Bar Component
 *
 * Simple progress bar with customizable appearance.
 */

'use client';

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

interface ProgressBarProps {
  /** Progress value (0-100) */
  value: number;
  /** Color variant */
  variant?: 'default' | 'success' | 'warning' | 'error';
  /** Height size */
  size?: 'sm' | 'md' | 'lg';
  /** Show percentage label */
  showLabel?: boolean;
  /** Additional CSS classes for the container */
  className?: string;
  /** Aria label for accessibility */
  'aria-label'?: string;
}

const variantClasses = {
  default: 'bg-primary',
  success: 'bg-green-500',
  warning: 'bg-yellow-500',
  error: 'bg-red-500',
};

const sizeClasses = {
  sm: 'h-1',
  md: 'h-2',
  lg: 'h-3',
};

export function ProgressBar({
  value,
  variant = 'default',
  size = 'md',
  showLabel = false,
  className,
  'aria-label': ariaLabel,
}: ProgressBarProps) {
  const clampedValue = Math.min(100, Math.max(0, value));

  return (
    <div className={cn('w-full', className)}>
      {showLabel && (
        <div className="mb-1 flex justify-between text-sm">
          <span className="text-muted-foreground">Progress</span>
          <span className="font-medium">{Math.round(clampedValue)}%</span>
        </div>
      )}
      <div
        className={cn('w-full rounded-full bg-muted', sizeClasses[size])}
        role="progressbar"
        aria-valuenow={clampedValue}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-label={ariaLabel || `Progress: ${Math.round(clampedValue)}%`}
      >
        <div
          className={cn(
            'h-full rounded-full transition-all duration-300 ease-in-out',
            variantClasses[variant]
          )}
          style={{ width: `${clampedValue}%` }}
        />
      </div>
    </div>
  );
}