import { RefreshCw } from "lucide-react";

interface DebtIntelligenceActionsProps {
  isLoading: boolean;
  onRefresh: () => void;
  onToggleFilters: () => void;
  showFilters: boolean;
  activeFilterCount: number;
}

export const DebtIntelligenceActions = ({
  isLoading,
  onRefresh,
  onToggleFilters,
  showFilters,
  activeFilterCount,
}: DebtIntelligenceActionsProps) => {
  return (
    <div className="flex items-center gap-2">
      <button
        onClick={onToggleFilters}
        className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition-all duration-200 ${
          showFilters
            ? "border-[#428B4D] bg-[#428B4D] text-white"
            : "border-[#428B4D]/40 bg-white text-slate-700 hover:bg-[#428B4D] hover:text-white"
        }`}
      >
        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        Filters {activeFilterCount > 0 && `(${activeFilterCount})`}
      </button>
      <button
        onClick={onRefresh}
        disabled={isLoading}
        className="inline-flex items-center gap-2 rounded-lg bg-[#428B4D] px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#357a3d] transition-colors disabled:opacity-50"
      >
        <RefreshCw className={isLoading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
        {isLoading ? "Refreshing…" : "Refresh"}
      </button>
    </div>
  );
};