const ddSettingRowCss = `
.dd-setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border-1);
  font-family: var(--font-sans); font-size: var(--text-base);
}
.dd-setrow:last-child { border-bottom: none; }
.dd-setrow__label { color: var(--text-1); }
.dd-setrow__desc { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.dd-setrow__control { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--text-sm); }
`;

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

export function SettingRow({ label, description, children, ...rest }) {
  return (
    <div className="dd-setrow" {...rest}>
      <div>
        <div className="dd-setrow__label">{label}</div>
        {description ? <div className="dd-setrow__desc">{description}</div> : null}
      </div>
      <div className="dd-setrow__control">{children}</div>
    </div>
  );
}