import type { SaveState } from '../hooks/useSave';
import { __ } from "@wordpress/i18n";
interface Props {
  id?: string;
  className?: string;
  state: SaveState;
  onClick: () => void;
  successLabel?: string;
  children: React.ReactNode;
}
export function SaveButton({
  id,
  className = 'button button-primary',
  state,
  onClick,
  successLabel = __('Saved', 'stockbeacon-product-waitlists-for-woocommerce'),
  children
}: Props) {
  if (state === 'saving') {
    return <button id={id} className={`${className} stockbeacon-save-feedback is-saving`} type="button" disabled aria-busy="true">
				<span className="stockbeacon-save-feedback__row">
					<span className="stockbeacon-save-feedback__spinner" aria-hidden="true" />
					<span>{__("Saving…", "stockbeacon-product-waitlists-for-woocommerce")}</span>
				</span>
			</button>;
  }
  if (state === 'saved') {
    return <button id={id} className={`${className} stockbeacon-save-feedback is-saved`} type="button" disabled aria-busy="true">
				<span className="stockbeacon-save-feedback__row">
					<svg className="stockbeacon-save-feedback__check" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
						<path d="M3.5 8.5l2.8 2.8L12.5 4.1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
					</svg>
					<span>{successLabel}</span>
				</span>
			</button>;
  }
  return <button id={id} className={className} type="button" onClick={onClick}>
			{children}
		</button>;
}
