import React from 'react';
import { AlertTriangle, FileText, Settings, TrendingUp, Download } from 'lucide-react';
import { tabs } from './CCFDashboard';


interface NavigationProps {
  setActiveTab: (tab: string | "controls" |"gaps" | "reports" ) => void;
}

const CCFNavigation: React.FC<NavigationProps> = ({ setActiveTab }) => {
  

  const currentTab = 'control';

  return (
    <nav className="bg-card border-b border-border/50 p-4">
      <div className="mx-auto">
        <div className="flex space-x-1">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`nav-link ${currentTab === tab.id ? 'active' : ''} flex items-center space-x-2 px-4 py-3 font-medium text-sm`}
              >
                <Icon className="w-4 h-4" />
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </nav>
  );
};

export default CCFNavigation;