import React from 'react';
import { WebSocketState } from '../hooks/useWebSocket';

export const Tabs = {
  CONTEXT: 'CONTEXT',
  RESPONSE: 'RESPONSE',
  INPUT: 'INPUT',
  OUTPUT: 'OUTPUT'
};

export const Header = ({ 
  wsState, 
  agentState, 
  activeTab, 
  setActiveTab, 
}) => (
  <header className="bg-white shadow-sm">
    <div className="flex items-center justify-between px-4 py-3">
      <div className="flex items-center space-x-4">
        <h1 className="text-xl font-semibold">SIA Control Interface</h1>
      </div>
      <div className="flex items-center space-x-2">
        <div className={`px-3 py-1 rounded-full text-sm ${
          wsState === WebSocketState.CONNECTED 
            ? 'bg-green-100 text-green-800'
            : wsState === WebSocketState.CONNECTING
            ? 'bg-yellow-100 text-yellow-800'
            : 'bg-red-100 text-red-800'
        }`}>
          {wsState}
        </div>
        <div className="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm">
          {agentState}
        </div>
      </div>
    </div>
    <div className="border-t">
      <div className="flex px-4">
        {Object.values(Tabs).map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-4 py-2 font-medium text-sm border-b-2 ${
              activeTab === tab
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
          </button>
        ))}
      </div>
    </div>
  </header>
);