import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";

const Progress = ({ value, max = 100, className, ...props }) => {
  return (
    <ProgressPrimitive.Root
      value={value}
      max={max}
      className="relative w-full h-4 bg-gray-200 rounded-md overflow-hidden"
      {...props}
    >
      <ProgressPrimitive.Indicator
        className="absolute top-0 left-0 h-full bg-blue-600 transition-all"
        style={{ width: `${(value / max) * 100}%` }}
      />
    </ProgressPrimitive.Root>
  );
};

export { Progress };