assetx/components/TabNavigation.tsx

"use client";

import { useState } from "react";

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

interface TabNavigationProps {
  tabs: Tab[];
  defaultActiveId?: string;
  onTabChange?: (tabId: string) => void;
}

export default function TabNavigation({
  tabs,
  defaultActiveId,
  onTabChange,
}: TabNavigationProps) {
  const [activeTab, setActiveTab] = useState(defaultActiveId || tabs[0]?.id);

  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId);
    onTabChange?.(tabId);
  };

  return (
    <div className="flex items-center gap-8">
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        return (
          <button
            key={tab.id}
            onClick={() => handleTabClick(tab.id)}
            className="flex flex-col gap-2 items-start"
          >
            <span
              className={`text-sm font-bold leading-[150%] ${
                isActive ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"
              }`}
            >
              {tab.label}
            </span>
            <div
              className={`self-stretch border-t-2 -mt-[2px] ${
                isActive ? "border-text-primary dark:border-white" : "border-transparent"
              }`}
            />
          </button>
        );
      })}
    </div>
  );
}