export function ProgressBar({ value, label }: { value: number; label?: string }) {
  const tone = value > 100 ? "bg-coral" : value >= 80 ? "bg-saffron" : "bg-mint";
  return (
    <div>
      {label ? (
        <div className="mb-2 flex justify-between text-sm text-ink/65 dark:text-paper/65">
          <span>{label}</span>
          <span>{value}%</span>
        </div>
      ) : null}
      <div className="h-2.5 overflow-hidden rounded-full bg-forest/10 dark:bg-white/10">
        <div className={`${tone} h-full rounded-full transition-all`} style={{ width: `${Math.min(value, 115)}%` }} />
      </div>
    </div>
  );
}