import { RefreshCw, Save } from "lucide-react";

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

export function ReportsHeader({
  onReload,
  onSave,
  saving,
  loading,
  hasError,
}: ReportsHeaderProps) {
  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] tracking-[0.3em] uppercase text-indigo-700 font-semibold">
            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="px-3 py-2 rounded-lg bg-white border border-slate-200 shadow-sm flex items-center gap-2 text-sm font-semibold"
          >
            <RefreshCw className="h-4 w-4" />
            Reload
          </button>

          <button
            type="button"
            onClick={onSave}
            disabled={saving || loading || hasError}
            className="px-3 py-2 rounded-lg bg-indigo-600 text-white border border-indigo-200 shadow-sm flex items-center gap-2 text-sm font-semibold disabled:opacity-60"
          >
            <Save className="h-4 w-4" />
            {saving ? "Saving…" : "Save order"}
          </button>
        </div>
      </div>
    </div>
  );
}