import React from 'react';

interface Tab {
  id: string;
  name: string;
  icon: React.ReactNode;
  component: React.ComponentType<Record<string, unknown>>;
}

interface SuperAdminTabNavigationProps {
  tabs: Tab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  platformMetrics: Record<string, unknown> | null;
  user: { id: string; email: string } | null;
}

export default function SuperAdminTabNavigation({ 
  tabs, 
  activeTab, 
  onTabChange, 
  platformMetrics, 
  user 
}: SuperAdminTabNavigationProps) {
  
  const ActiveComponent = tabs.find(tab => tab.id === activeTab)?.component;

  return (
    <div className="space-y-6">
      {/* Navigation Tabs */}
      <div className="mb-6">
        <nav className="flex space-x-8 border-b border-white/20">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`tab-button border-b-2 py-2 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/10 rounded-t-lg flex items-center gap-2 ${
                activeTab === tab.id
                  ? 'border-indigo-400 text-white bg-white/10'
                  : 'border-transparent text-white/80 hover:text-white'
              }`}
            >
              {tab.icon}
              {tab.name}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      <div className="bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl">
        {ActiveComponent && (
          <ActiveComponent 
            platformMetrics={platformMetrics}
            user={user}
          />
        )}
      </div>
    </div>
  );
}