const ddProgressCss = `
.dd-progress { background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.dd-progress i { display: block; height: 100%; border-radius: var(--radius-full);
  background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.dd-progress--warning i { background: var(--warning); }
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-progress-css')) {
  const s = document.createElement('style');
  s.id = 'dd-progress-css';
  s.textContent = ddProgressCss;
  document.head.appendChild(s);
}

export function ProgressBar({ value = 0, max = 100, height = 6, warnAt = 0.9, style, ...rest }) {
  const ratio = Math.min(1, max > 0 ? value / max : 0);
  const warning = ratio >= warnAt;
  return (
    <div className={`dd-progress${warning ? ' dd-progress--warning' : ''}`}
      style={{ height, ...style }} role="progressbar" aria-valuenow={value} aria-valuemax={max} {...rest}>
      <i style={{ width: `${ratio * 100}%` }}></i>
    </div>
  );
}