// ==========================================
// Header Component
// ==========================================

const Header = ({ lang, setLang, apiKey, onSettingsClick, t }) => {
    const { SparklesIcon, SettingsIcon } = window.Icons;

    return (
        <header className="sticky top-0 z-50 bg-[#020617]/80 backdrop-blur-xl border-b border-slate-800 p-4">
            <div className="max-w-7xl mx-auto flex justify-between items-center">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-violet-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
                        <SparklesIcon />
                    </div>
                    <div>
                        <h1 className="font-bold text-lg leading-tight tracking-tight">PixelGen Lab</h1>
                        <p className="text-[10px] text-slate-500 font-black uppercase tracking-widest">{t('Pixel Sprite Generation Engine', '像素精灵生成引擎')}</p>
                    </div>
                </div>

                <div className="flex items-center gap-4">
                    {/* Debug Mode Indicator */}
                    {window.PixelApi.isDebugMode() && (
                        <div className="px-3 py-1 bg-amber-500/20 border border-amber-500/50 rounded-lg">
                            <span className="text-[10px] font-bold text-amber-400 uppercase tracking-widest">DEBUG MODE</span>
                        </div>
                    )}

                    <div className="flex bg-slate-950 p-1 rounded-xl border border-slate-800">
                        <button onClick={() => setLang('en')} className={`px-3 py-1 text-[10px] font-bold rounded-lg transition-all ${lang === 'en' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'}`}>EN</button>
                        <button onClick={() => setLang('cn')} className={`px-3 py-1 text-[10px] font-bold rounded-lg transition-all ${lang === 'cn' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'}`}>中</button>
                        <button onClick={() => setLang('bilingual')} className={`px-3 py-1 text-[10px] font-bold rounded-lg transition-all ${lang === 'bilingual' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'}`}>ALL</button>
                    </div>
                    <button onClick={onSettingsClick} className={`p-2.5 rounded-xl border transition-colors ${!apiKey ? 'border-amber-500/50 text-amber-500 bg-amber-500/10 animate-pulse' : 'border-slate-800 hover:bg-slate-800'}`}>
                        <SettingsIcon />
                    </button>
                </div>
            </div>
        </header>
    );
};

window.Header = Header;