const ddIconBtnCss = `
.dd-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-2);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dd-iconbtn:hover { background: var(--surface-2); color: var(--text-1); }
.dd-iconbtn:active { background: var(--surface-3); }
.dd-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dd-iconbtn[disabled] { opacity: 0.45; pointer-events: none; }
`;

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

export function IconButton({ size = 32, label, disabled = false, children, ...rest }) {
  return (
    <button type="button" className="dd-iconbtn" aria-label={label} title={label}
      style={{ width: size, height: size }} disabled={disabled} {...rest}>
      {children}
    </button>
  );
}