frontend/src/components/Header.tsx

import { Zap, MessageSquare } from 'lucide-react';

interface HeaderProps {
  isConnected: boolean;
  feedbackStats?: {
    total: number;
    correct: number;
    incorrect: number;
  } | null;
}

export function Header({ isConnected, feedbackStats }: HeaderProps) {
  return (
    <header className="bg-white border-b border-dark-border px-8 py-4 shadow-sm">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-nvidia-green/10 border border-nvidia-green/20">
            <Zap className="w-5 h-5 text-nvidia-green" />
          </div>
          <div>
            <h1 className="text-xl font-semibold text-text-primary tracking-tight">
              Fetal<span className="text-nvidia-green">CLIP</span>
            </h1>
            <p className="text-text-muted text-xs">
              Foundation model for zero-shot fetal ultrasound analysis
            </p>
          </div>
        </div>
        <div className="flex items-center gap-5">
          {/* Feedback counter */}
          {feedbackStats && feedbackStats.total > 0 && (
            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
              <MessageSquare className="w-3.5 h-3.5 text-accent-blue" />
              <span className="text-xs text-text-secondary">
                <span className="text-green-600 font-medium">{feedbackStats.correct}</span>
                <span className="text-text-muted mx-1">/</span>
                <span className="text-red-500 font-medium">{feedbackStats.incorrect}</span>
              </span>
              {feedbackStats.total >= 5 && (
                <span className="text-xs text-text-muted">
                  ({Math.round(feedbackStats.correct / feedbackStats.total * 100)}%)
                </span>
              )}
            </div>
          )}
          
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
            <div
              className={`w-2 h-2 rounded-full transition-colors ${
                isConnected 
                  ? 'bg-nvidia-green shadow-[0_0_8px_rgba(118,185,0,0.5)]' 
                  : 'bg-red-500 animate-pulse'
              }`}
            />
            <span className="text-xs text-text-secondary">
              {isConnected ? 'Model Ready' : 'Connecting...'}
            </span>
          </div>
          <a
            href="https://huggingface.co/numansaeed/fetalclip-model"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 text-sm text-accent-blue hover:text-accent-blue-hover transition-colors"
          >
            <span>🤗</span>
            <span>Model Hub</span>
          </a>
          <a
            href="https://arxiv.org/abs/2502.14807"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 text-sm text-accent-blue hover:text-accent-blue-hover transition-colors"
          >
            <span>📄</span>
            <span>Paper</span>
          </a>
        </div>
      </div>
    </header>
  );
}