Spinner

import { useState } from 'react';

const SPINNER_DELAY_MS = 300; // quick saves never flash a spinner
const SAVED_FOR_MS = 1500;

type Status = 'idle' | 'pending' | 'saving' | 'saved';
const LABELS: Record<Status, string> = {
  idle: 'Save changes',
  pending: 'Save changes',
  saving: 'Saving…',
  saved: 'Saved'
};

export function SaveButton({ onSave }: { onSave: () => Promise<void> }) {
  const [status, setStatus] = useState<Status>('idle');

  async function save() {
    setStatus('pending');
    const timer = setTimeout(() => setStatus('saving'), SPINNER_DELAY_MS);
    try {
      await onSave();
      setStatus('saved');
      setTimeout(() => setStatus('idle'), SAVED_FOR_MS);
    } catch {
      setStatus('idle'); // onSave reports its own error
    } finally {
      clearTimeout(timer);
    }
  }

  return (
    <>
      {/* min-w keeps the width steady as the label changes. */}
      <button
        type='button'
        onClick={save}
        disabled={status !== 'idle'}
        className='inline-flex h-10 min-w-36 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground disabled:opacity-80'
      >
        {status === 'saving' && (
          // One quarter of the ring in the text color, the rest at 20%, one turn per 700ms.
          <span className='size-4 animate-spin rounded-full border-2 border-current/20 border-t-current [animation-duration:700ms] motion-reduce:[animation-duration:2s]' />
        )}
        {status === 'saved' && '✓'}
        {LABELS[status]}
      </button>
      <span role='status' className='sr-only'>
        {status === 'saving' ? 'Saving' : status === 'saved' ? 'Saved' : ''}
      </span>
    </>
  );
}