import * as React from "react";
import { twMerge } from "tailwind-merge";

export function Progress({ value = 0, className }: { value?: number; className?: string }) {
  const pct = Math.min(100, Math.max(0, value));
  return (
    <div className={twMerge("h-3 w-full overflow-hidden rounded-full bg-slate-200", className)}>
      <div className="h-full bg-black transition-all" style={{ width: pct + "%" }} />
    </div>
  );
}