"use client";

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

import { cn } from "@/lib/utils";
import { Label } from "./label";

interface ProgressProps
  extends React.ComponentProps<typeof ProgressPrimitive.Root> {
  label?: string;
  classNameProgressContainer?: string;
}

function Progress({
  className,
  classNameProgressContainer,
  value,
  label,
  ...props
}: ProgressProps) {
  return (
    <div className={cn("w-full flex flex-col gap-[3px]", className)}>
      {label && (
        <Label className="flex-row justify-end w-full px-2 text-right text-muted-foreground font-inter font-medium text-xs">
          {label}
        </Label>
      )}
      <ProgressPrimitive.Root
        data-slot="progress"
        className={cn(
          "bg-border relative h-1.5 w-full overflow-hidden rounded-full",
          classNameProgressContainer
        )}
        {...props}
      >
        <ProgressPrimitive.Indicator
          data-slot="progress-indicator"
          className="bg-primary h-full w-full flex-1 transition-all rounded-full"
          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
        />
      </ProgressPrimitive.Root>
    </div>
  );
}

export { Progress };