import { useState } from "preact/hooks";
import { clearList } from "../lib/api";
import { text } from "../lib/config";

/**
 * "Clear all" for the shopper's own list (inline toolbar and popup header).
 * The table refetches through the `pcfw:cleared` event and shows the empty
 * state; the button stays disabled while the request runs.
 */
export function ClearAllButton() {
  const [busy, setBusy] = useState(false);

  const clear = async () => {
    setBusy(true);
    await clearList();
    setBusy(false);
  };

  return (
    <button
      type="button"
      className="pcfw-table__clear"
      disabled={busy}
      onClick={clear}
    >
      {text("clearAll", "Clear all")}
    </button>
  );
}