import { TABS, TabName } from "@/types/portfolio-analytics";

interface TabNavigationProps {
  activeTab: TabName;
  onTabChange: (tab: TabName) => void;
}

export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
  return (
    <div className="mb-6 flex flex-wrap gap-2 overflow-x-auto pb-2 bg-white px-4 py-3 rounded-lg shadow-sm">
      {TABS.map((tab) => (
        <button
          key={tab}
          onClick={() => onTabChange(tab)}
          className={`whitespace-nowrap rounded-lg border px-4 py-2 text-sm font-medium transition ${
            activeTab === tab
              ? "border-[#428B4D] bg-[#428B4D] text-white"
              : "border-gray-300 bg-white text-gray-700 hover:border-[#428B4D] hover:text-[#428B4D]"
          }`}
        >
          {tab}
        </button>
      ))}
    </div>
  );
}