'use client';

interface TabNavigationProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  /** Show Users tab (admin only). Default true for backward compatibility */
  showUsersTab?: boolean;
}

export default function TabNavigation({ activeTab, onTabChange, showUsersTab = true }: TabNavigationProps) {
  const tabs = [
    { id: 'overview', label: '📈 Overview' },
    { id: 'search', label: '🔍 Search' },
    { id: 'results', label: '📊 Search Results' },
    { id: 'details', label: '📝 Details' },
    ...(showUsersTab ? [{ id: 'users', label: '🛡️ Users' }] : []),
  ];

  return (
    <div className="tab-nav">
      {tabs.map((tab: { id: string; label: string }) => (
        <button
          key={tab.id}
          className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
          data-tab={tab.id}
          onClick={() => onTabChange(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}