"use client";

export type PortfolioTab = "academic" | "coding";

interface TabNavProps {
  activeTab: PortfolioTab;
  onTabChange: (tab: PortfolioTab) => void;
  labels: { academic: string; coding: string };
}

const TABS: PortfolioTab[] = ["academic", "coding"];

export default function TabNav({
  activeTab,
  onTabChange,
  labels,
}: TabNavProps) {
  return (
    <div className="bg-white border-b border-gray-200">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div
          role="tablist"
          aria-label="Portfolio sections"
          className="-mb-px flex gap-8"
        >
          {TABS.map((tab) => (
            <button
              key={tab}
              role="tab"
              aria-selected={activeTab === tab}
              aria-controls="portfolio-panel"
              onClick={() => onTabChange(tab)}
              className={`border-b-2 px-2 py-4 text-base font-semibold transition-colors ${
                activeTab === tab
                  ? "border-indigo-600 text-indigo-600"
                  : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
              }`}
            >
              {labels[tab]}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
