import { Save } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TransactionSettingsActionsProps {
  isSaving: boolean;
  isLoading: boolean;
  hasError: boolean;
  onSave: () => void;
}

export function TransactionSettingsActions({
  isSaving,
  isLoading,
  hasError,
  onSave,
}: TransactionSettingsActionsProps) {
  const disabled = isSaving || isLoading || hasError;

  return (
    <button
      type="button"
      onClick={onSave}
      disabled={disabled}
      aria-disabled={disabled}
      className={cn(
        "inline-flex items-center gap-2 rounded-lg border border-indigo-200 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-indigo-500",
        disabled && "opacity-60"
      )}
    >
      <Save className="h-4 w-4" />
      {isSaving ? "Saving…" : "Save order"}
    </button>
  );
}