// A button that runs one confirm-gated write (dry run -> native dialog -> apply) and spins while it runs.
import type { ReactNode } from 'react';
import type { useWrite, WriteRun } from '../store';
import { Icon, type IconName } from './icons';

export function WriteButton({ w, run, icon, children, primary, danger, disabled, hint, small = true }: {
  w: WriteRun; run: ReturnType<typeof useWrite>; icon: IconName; children: ReactNode; primary?: boolean; danger?: boolean; disabled?: boolean; hint?: string; small?: boolean;
}) {
  const mine = run.isBusy(w.method, w.args);
  return (
    <button className={`btn${small ? ' btn-sm' : ''}${primary ? ' btn-primary' : ''}${danger ? ' btn-danger' : ''}`} disabled={disabled || !!run.busy} title={hint} aria-busy={mine || undefined}
      onClick={() => { run.run(w); }}>
      <Icon name={mine ? 'refresh' : icon} className={mine ? 'spin' : undefined} />{children}
    </button>
  );
}