import React from "react";

export const Progress = React.forwardRef<HTMLDivElement, any>(({ className = '', value, asChild, ...props }, ref) => {
  return (
    <div ref={ref} className={`relative h-4 w-full overflow-hidden rounded-full bg-border ${className}`} {...props}>
      <div 
        className="h-full w-full flex-1 bg-primary transition-all duration-300 ease-in-out" 
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }} 
      />
    </div>
  );
});
Progress.displayName = "Progress";