'use client';

import * as React from 'react';
import { cn } from '@/utils';

interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value?: number;
  max?: number;
  indeterminate?: boolean;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'success' | 'error';
  showLabel?: boolean;
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  ({
    className,
    value = 0,
    max = 100,
    indeterminate = false,
    size = 'md',
    variant = 'default',
    showLabel = false,
    ...props
  }, ref) => {
    const percentage = Math.min(100, Math.max(0, (value / max) * 100));

    const sizeClasses = {
      sm: 'h-1.5',
      md: 'h-2.5',
      lg: 'h-4',
    };

    const variantClasses = {
      default: 'bg-gradient-to-r from-indigo-500 to-purple-600',
      success: 'bg-green-500',
      error: 'bg-red-500',
    };

    return (
      <div
        ref={ref}
        className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}
        {...props}
      >
        <div
          className={cn(
            'h-full w-full flex-1 transition-all duration-300 ease-out rounded-full',
            sizeClasses[size],
            variantClasses[variant],
            indeterminate && 'animate-indeterminate'
          )}
          style={{
            width: indeterminate ? '50%' : `${percentage}%`,
            transform: indeterminate ? 'translateX(-100%)' : undefined,
            animation: indeterminate ? 'indeterminate 1.5s infinite' : undefined,
          }}
        />
        {showLabel && !indeterminate && (
          <span className="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-white drop-shadow-md">
            {Math.round(percentage)}%
          </span>
        )}
      </div>
    );
  }
);
Progress.displayName = 'Progress';

export { Progress };
