"use client";

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

export function Progress({ value = 0, className }: { value?: number; className?: string }) {
  return (
    <ProgressPrimitive.Root className={cn("relative h-2 w-full overflow-hidden rounded-full bg-slate-100", className)} value={value}>
      <ProgressPrimitive.Indicator className="h-full bg-gradient-to-r from-cyan-400 via-fuchsia-500 to-yellow-300 transition-transform" style={{ transform: `translateX(-${100 - Math.min(value, 100)}%)` }} />
    </ProgressPrimitive.Root>
  );
}