import { RefreshCw } from "lucide-react";

interface OverallSummaryReportActionsProps {
  isLoading: boolean;
  onRefresh: () => void;
  lastRefreshedAt?: string | null;
}

export const OverallSummaryReportActions = ({
  isLoading,
  onRefresh,
  lastRefreshedAt,
}: OverallSummaryReportActionsProps) => {
  const actionButtonClass = isLoading
    ? "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-500 shadow-sm transition-all duration-200 cursor-not-allowed"
    : "inline-flex items-center gap-2 rounded-lg border border-[#428B4D]/40 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40 active:scale-95";

  return (
    <div className="flex items-center gap-3 text-right">
      {lastRefreshedAt && (
        <span className="text-xs text-slate-500">
          Last refreshed: {new Date(lastRefreshedAt).toLocaleString()}
        </span>
      )}
      <button onClick={onRefresh} disabled={isLoading} className={actionButtonClass}>
        <RefreshCw className={isLoading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
        {isLoading ? "Refreshing..." : "Refresh"}
      </button>
    </div>
  );
};