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

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

export const PortfolioReportActions = ({
  isLoading,
  onRefresh,
  onToggleFilters,
  showFilters,
  activeFilterCount,
}: PortfolioReportActionsProps) => {
  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"
        }`}
      >
        <Filter size={16} />
        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 size={16} className={isLoading ? "animate-spin" : ""} />
        Refresh
      </button>
    </div>
  );
};