NEXUS_AI.pro/pixel-perfect-pixels-main/src/components/chat/ChatHeader.tsx

import { motion } from "framer-motion";
import { Shield, Plus, Command } from "lucide-react";
import { ModelSwitcher, ModelType } from "./ModelSwitcher";

interface ChatHeaderProps {
  onNewChat: () => void;
  selectedModel: ModelType;
  onModelChange: (model: ModelType) => void;
  onOpenCommand?: () => void;
}

export const ChatHeader = ({ onNewChat, selectedModel, onModelChange, onOpenCommand }: ChatHeaderProps) => {
  return (
    <motion.header
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-glass-cyber sticky top-0 z-10"
    >
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 rounded-lg bg-gradient-cyber flex items-center justify-center glow-cyan animate-pulse-cyan">
          <Shield size={16} className="text-primary-foreground" />
        </div>
        <div>
          <h1 className="font-heading font-bold text-sm text-gradient-cyber tracking-wide">
            NEXUS-AI
          </h1>
          <p className="text-[9px] text-muted-foreground font-mono tracking-widest">CHAT MODE</p>
        </div>
      </div>

      <div className="flex items-center gap-1.5">
        <ModelSwitcher selectedModel={selectedModel} onModelChange={onModelChange} />
        <button
          onClick={onNewChat}
          className="p-2 rounded-lg bg-secondary hover:bg-secondary/80 text-foreground transition-colors"
          title="New Chat"
        >
          <Plus size={16} />
        </button>
      </div>
    </motion.header>
  );
};