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

export interface ReportsHeaderProps {
  onReload: () => void;
  onSave: () => void;
  saving: boolean;
  loading: boolean;
  hasError: boolean;
}

export function ReportsHeader({
  onReload,
  onSave,
  saving,
  loading,
  hasError,
}: ReportsHeaderProps) {
  const saveDisabled = saving || loading || hasError;

  return (
    <div className="rounded-lg border border-slate-200 bg-gradient-to-r from-indigo-50 via-white to-fuchsia-50 px-6 py-5 shadow-lg ring-1 ring-slate-100">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-indigo-700">
            Settings
          </p>
          <h1 className="text-2xl font-semibold text-slate-900">
            Transaction Priority Scheduling
          </h1>
          <p className="text-sm text-slate-600">
            Click a transaction type to configure priority ordering.
          </p>
        </div>

        <div className="flex gap-2">
          <button
            type="button"
            onClick={onReload}
            className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold shadow-sm"
          >
            <RefreshCw className="h-4 w-4" />
            Reload
          </button>
          <button
            type="button"
            onClick={onSave}
            disabled={saveDisabled}
            aria-disabled={saveDisabled}
            className={cn(
              "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",
              saveDisabled && "opacity-60"
            )}
          >
            <Save className="h-4 w-4" />
            {saving ? "Saving…" : "Save order"}
          </button>
        </div>
      </div>
    </div>
  );
}