export function Progress({ value, max, danger = true }: { value: number; max: number; danger?: boolean }) {
  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
  const over = value > max;
  const color = danger ? (over ? "bg-red-500" : pct >= 80 ? "bg-amber-500" : "bg-brand-500") : "bg-brand-500";
  return (
    <div className="h-2 w-full overflow-hidden rounded-full bg-stone-100">
      <div className={`h-full rounded-full ${color}`} style={{ width: `${pct}%` }} />
    </div>
  );
}