// @/utils/NavigationTabs.tsx
import React from 'react';

interface NavigationTabsProps {
  tabs: string[];
  activeTab: string;
  onTabChange: (tab: string) => void;
  className?: string;
}

export default function NavigationTabs({
  tabs,
  activeTab,
  onTabChange,
  className = '',
}: NavigationTabsProps) {
  return (
    <div
      className={`flex items-center gap-8 border-b border-slate-800 text-sm font-semibold overflow-x-auto no-scrollbar ${className}`}
    >
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => onTabChange(tab)}
          className={`pb-3 relative transition-colors whitespace-nowrap ${
            activeTab === tab
              ? 'text-teal-400 border-b-2 border-teal-400 font-bold'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          {tab}
        </button>
      ))}
    </div>
  );
}