frontend/src/components/ui/progress.tsx

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

export interface ProgressProps
  extends React.HTMLAttributes<HTMLDivElement> {
  value?: number;
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  ({ className, value, ...props }, ref) => {
    const isIndeterminate = value === undefined;
    
    return (
      <div

        ref={ref}

        className={cn(

          "relative h-4 w-full overflow-hidden rounded-full bg-secondary",

          className

        )}

        {...props}

      >

        <div

          className={cn(

            "h-full flex-1 transition-all",

            isIndeterminate

              ? "w-full bg-gradient-to-r from-primary via-purple-500 to-primary animate-gradient bg-[length:200%_100%]"

              : "w-full bg-primary"

          )}

          style={

            !isIndeterminate

              ? { transform: `translateX(-${100 - (value || 0)}%)` }

              : undefined

          }

        />

      </div>
    );
  }
);
Progress.displayName = "Progress";

export { Progress };