// Shared UI helpers
const { useState: useStateSh, useEffect: useEffectSh } = React;

function LangToggle({ lang, setLang, theme = 'dark' }) {
  const isDark = theme === 'dark';
  return (
    <button
      className="lang-toggle"
      onClick={() => setLang(lang === 'es' ? 'en' : 'es')}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
        padding: '6px 10px', border: `1px solid ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)'}`,
        background: 'transparent', color: 'inherit',
        cursor: 'pointer', letterSpacing: 0.5,
      }}
    >
      <span style={{ opacity: lang === 'es' ? 1 : 0.35 }}>ES</span>
      <span style={{ opacity: 0.3 }}>/</span>
      <span style={{ opacity: lang === 'en' ? 1 : 0.35 }}>EN</span>
    </button>
  );
}

window.LangToggle = LangToggle;
window.useStateSh = useStateSh;
window.useEffectSh = useEffectSh;