import React, { useState } from 'react';
import { AlertCircle, Shield, Activity } from 'lucide-react';

const TAB_CONFIG = [
  { id: 'tickets', label: 'Tickets', icon: AlertCircle, color: '#F59E0B' },
  { id: 'archer', label: 'Archer', icon: Shield, color: '#8B5CF6' },
  { id: 'ivanti', label: 'Ivanti', icon: Activity, color: '#0D9488' },
];

export default function SidebarTabs({ children }) {
  const [activeTab, setActiveTab] = useState('tickets');

  // children should be an object: { tickets: <Node>, archer: <Node>, ivanti: <Node> }
  // Or we accept children as array and map by index
  const panels = children;

  return (
    <div className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
      {/* Tab bar */}
      <div className="flex" style={{ borderBottom: '1px solid rgba(100, 116, 139, 0.25)' }}>
        {TAB_CONFIG.map(tab => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className="flex-1 flex items-center justify-center gap-1.5 py-2.5 px-2 transition-all font-mono text-xs uppercase tracking-wider"
              style={{
                color: isActive ? tab.color : '#64748B',
                background: isActive ? `rgba(${tab.color === '#F59E0B' ? '245,158,11' : tab.color === '#8B5CF6' ? '139,92,246' : '13,148,136'}, 0.08)` : 'transparent',
                borderBottom: isActive ? `2px solid ${tab.color}` : '2px solid transparent',
              }}
              aria-selected={isActive}
              role="tab"
            >
              <Icon className="w-3.5 h-3.5" />
              <span>{tab.label}</span>
            </button>
          );
        })}
      </div>

      {/* Tab content */}
      <div style={{ padding: '1rem' }}>
        {activeTab === 'tickets' && panels.tickets}
        {activeTab === 'archer' && panels.archer}
        {activeTab === 'ivanti' && panels.ivanti}
      </div>
    </div>
  );
}