import React from "react";
import { RefreshCw } from "lucide-react";

interface TabNavigationProps {
  showGraph: boolean;
  onShowReport: () => void;
  onShowGraph: () => void;
  graphLoading: boolean;
}

export const TabNavigation: React.FC<TabNavigationProps> = ({
  showGraph,
  onShowReport,
  onShowGraph,
  graphLoading,
}) => {
  return (
    <div className="mt-6 flex gap-2">
      <button
        onClick={onShowReport}
        className={`px-6 py-2 rounded-lg border font-medium transition-all ${
          !showGraph
            ? "border-[#428B4D] bg-[#428B4D] text-white hover:bg-[#357a3f]"
            : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
        }`}
      >
        Report
      </button>
      <button
        onClick={onShowGraph}
        disabled={graphLoading}
        className={`px-6 py-2 rounded-lg border font-medium transition-all disabled:opacity-50 ${
          showGraph
            ? "border-[#428B4D] bg-[#428B4D] text-white hover:bg-[#357a3f]"
            : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
        }`}
      >
        {graphLoading ? (
          <span className="inline-flex items-center gap-2">
            <RefreshCw className="h-4 w-4 animate-spin" />
            Loading…
          </span>
        ) : (
          "Graph"
        )}
      </button>
    </div>
  );
};