eCourt-note/components/wordaddin/SaveControls.tsx

import { CircleCheck, Save, X } from "lucide-react";

import { MessageBar } from "./MessageBar";
import { Spinner } from "./Spinner";

/**
 * FR-17/FR-18 — ปุ่ม [บันทึก] / [บันทึกและปิดเอกสาร] + สถานะการบันทึก (ใช้ทุก phase ตาม spec v10)
 * banner autoSaveError อยู่ที่นี่เพื่อให้เห็นทุก phase ไม่เฉพาะตอน tracking
 * พอร์ตจาก SaveControls ใน App.tsx ต้นฉบับ (D:\word-addin-poc\addin) — logic เดิม เปลี่ยนแค่ชั้นภาพ
 */
export function SaveControls({
  disabled,
  busy,
  status,
  error,
  autoSaveError,
  closeSupported,
  onSave,
  onSaveAndClose,
}: {
  /** กำลังอยู่ใน flow อื่น (versioning) — ปิดปุ่มกันกดซ้อน */
  disabled: boolean;
  busy: boolean;
  status: "saving" | "saved" | null;
  error: string | null;
  autoSaveError: string | null;
  closeSupported: boolean;
  onSave: () => void;
  onSaveAndClose: () => void;
}) {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          className="focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50"
          disabled={disabled || busy}
          onClick={onSave}
        >
          <Save className="size-4" aria-hidden />
          บันทึก
        </button>
        {closeSupported ? (
          <button
            type="button"
            className="focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50"
            disabled={disabled || busy}
            onClick={onSaveAndClose}
          >
            <X className="size-4" aria-hidden />
            บันทึกและปิดเอกสาร
          </button>
        ) : null}
      </div>
      {busy && status === "saving" ? <Spinner label="กำลังบันทึก…" /> : null}
      {!busy && status === "saved" ? (
        <p className="inline-flex items-center gap-1.5 text-sm text-ink-soft">
          <CircleCheck className="size-4 text-success-ink" aria-hidden />
          บันทึกแล้ว
        </p>
      ) : null}
      {error ? <MessageBar intent="error">{error}</MessageBar> : null}
      {autoSaveError ? <MessageBar intent="warning">{autoSaveError}</MessageBar> : null}
    </div>
  );
}

export default SaveControls;