import React from 'react'

export default function Header({ onAddNode, onToggleChat, showChat, nodeCount, connectionCount }) {
  return (
    <header className="bg-slate-800/80 backdrop-blur-sm border-b border-slate-700 px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-xl flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <div>
              <h1 className="text-xl font-bold text-white">AI Agent Panel</h1>
              <p className="text-xs text-slate-400">Multi-Agent Workflow Orchestrator</p>
            </div>
          </div>
          
          <div className="flex items-center gap-4 ml-8">
            <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-700/50 rounded-lg">
              <div className="w-2 h-2 rounded-full bg-emerald-400"></div>
              <span className="text-sm text-slate-300">{nodeCount} Nodes</span>
            </div>
            <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-700/50 rounded-lg">
              <div className="w-2 h-2 rounded-full bg-blue-400"></div>
              <span className="text-sm text-slate-300">{connectionCount} Connections</span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <a 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-sm text-slate-400 hover:text-violet-400 transition-colors"
          >
            Built with anycoder
          </a>
          
          <button
            onClick={onToggleChat}
            className={`px-4 py-2 rounded-lg font-medium transition-all ${
              showChat 
                ? 'bg-violet-600 text-white' 
                : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
            }`}
          >
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              Chat
            </div>
          </button>
          
          <button
            onClick={onAddNode}
            className="px-4 py-2 bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white rounded-lg font-medium hover:from-violet-500 hover:to-fuchsia-500 transition-all flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Add Node
          </button>
        </div>
      </div>
    </header>
  )
}