export type TabId =
  | 'summary'
  | 'manifesto'
  | 'personal'
  | 'voting-record'
  | 'policies'
  | 'financial'
  | 'history';

interface Tab {
  id: TabId;
  label: string;
}

interface CandidateTabNavigationProps {
  activeTab: TabId;
  onTabChange: (tab: TabId) => void;
  tabs: Tab[];
}

export function CandidateTabNavigation({
  activeTab,
  onTabChange,
  tabs,
}: CandidateTabNavigationProps) {
  return (
    <div className="sticky top-[70px] sm:top-[72px] md:top-[80px] z-40 bg-blue-50 pt-2 pb-1 mb-4 sm:mb-6">
      <div className="border-b border-blue-200 flex gap-3 sm:gap-6 md:gap-8 overflow-x-auto scrollbar-hide">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`group flex items-center justify-center border-b-[3px] pb-2.5 sm:pb-3 pt-1.5 sm:pt-2 px-1 min-w-fit outline-none transition-all ${
              activeTab === tab.id
                ? 'border-b-blue-600 text-blue-700'
                : 'border-b-transparent text-gray-500 hover:text-blue-600 hover:border-b-blue-300'
            }`}
          >
            <p className="text-xs sm:text-sm font-bold leading-normal tracking-[0.015em]">
              {tab.label}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}