import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from "react";
import { cn } from "../lib/utils";

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
    variant?: "default" | "sandbox";
    showValue?: boolean;
  }
>(
  (
    { className, value, variant = "default", showValue = false, ...props },
    ref,
  ) => {
    const indicatorVariants = {
      default: "bg-primary",
      sandbox: "bg-[image:var(--accent-gradient-strong)]",
    };

    return (
      <div className="relative">
        <ProgressPrimitive.Root
          ref={ref}
          className={cn(
            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
            className,
          )}
          {...props}
        >
          <ProgressPrimitive.Indicator
            className={cn(
              "h-full w-full flex-1 transition-all duration-300 ease-out",
              indicatorVariants[variant],
            )}
            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
          />
        </ProgressPrimitive.Root>
        {showValue && (
          <span className="absolute -top-6 right-0 text-muted-foreground text-xs">
            {value}%
          </span>
        )}
      </div>
    );
  },
);
Progress.displayName = ProgressPrimitive.Root.displayName;

export { Progress };