assetx/components/TabNavigation.tsx

"use client";

import { Tabs, Tab } from "@heroui/react";

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

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

export default function TabNavigation({
  tabs,
  defaultActiveId,
  onTabChange,
}: TabNavigationProps) {
  const handleSelectionChange = (key: React.Key) => {
    onTabChange?.(key.toString());
  };

  return (
    <Tabs
      selectedKey={defaultActiveId || tabs[0]?.id}
      onSelectionChange={handleSelectionChange}
      variant="underlined"
      classNames={{
        base: "w-auto",
        tabList: "gap-8 w-auto p-0",
        cursor: "bg-text-primary dark:bg-white",
        tab: "px-0 h-auto",
        tabContent: "text-sm font-bold text-text-tertiary dark:text-gray-400 group-data-[selected=true]:text-text-primary dark:group-data-[selected=true]:text-white",
      }}
    >
      {tabs.map((tab) => (
        <Tab key={tab.id} title={tab.label} />
      ))}
    </Tabs>
  );
}