medical-ai-frontend/src/components/Header.tsx

/**
 * Header Component
 * Top navigation for the medical platform
 */

interface HeaderProps {
  onShowModelInfo: () => void;
  onReset: () => void;
  hasActiveAnalysis: boolean;
}

export function Header({ onShowModelInfo, onReset, hasActiveAnalysis }: HeaderProps) {
  return (
    <header className="bg-white shadow-sm border-b border-gray-200">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <div>
            <h1 className="text-xl font-bold text-gray-900">Medical AI Platform</h1>
            <p className="text-xs text-gray-500">Advanced Report Analysis</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button
            onClick={onShowModelInfo}
            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <svg className="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Models Info
          </button>

          {hasActiveAnalysis && (
            <button
              onClick={onReset}
              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
            >
              New Analysis
            </button>
          )}
        </div>
      </div>
    </header>
  );
}