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

export interface ProgressBarProps {
    value: number;
    max?: number;
    label?: string;
    showValue?: boolean;
    size?: 'sm' | 'md' | 'lg';
    variant?: 'default' | 'success' | 'warning' | 'danger';
    className?: string;
}

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

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

const ProgressBar = React.memo(function ProgressBar({
    value,
    max = 100,
    label,
    showValue = false,
    size = 'md',
    variant = 'default',
    className,
}: ProgressBarProps) {
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);

    return (
        <div className={cn('w-full', className)}>
            {(label || showValue) && (
                <div className="flex items-center justify-between mb-1">
                    {label && <span className="text-sm font-medium">{label}</span>}
                    {showValue && (
                        <span className="text-sm text-muted-foreground">
                            {percentage.toFixed(1)}%
                        </span>
                    )}
                </div>
            )}
            <div className={cn('w-full rounded-full bg-secondary', sizeClasses[size])}>
                <div
                    className={cn(
                        'h-full rounded-full transition-all duration-300',
                        variantClasses[variant]
                    )}
                    style={{ width: `${percentage}%` }}
                />
            </div>
        </div>
    );
});

export { ProgressBar };