import React from 'react';
import { View } from 'react-native';
import { SvgXml } from 'react-native-svg';

import { SUPERAGENT_LOGO_ASPECT, SUPERAGENT_LOGO_SVG } from '../branding/superagentLogo';
import { styles } from '../../styles';
import { themedColor } from '../../theme';

const LOGO_HEIGHT = 20;

/**
 * Native Superagent top bar (DS mobile-web header parity): a centered Base44 logo.
 * The workspace button intentionally lives in the sidebar, not the top bar.
 */
export function SuperagentTopBar() {
  // The top safe-area inset is already applied by SuperagentScreen's SafeAreaView
  // (the bar renders inside it), so we must NOT add insets.top here — that would
  // push the bar down by a second status-bar/notch height.

  // Theme the logo wordmark (authored ink #0F0E0E) onto the DS default
  // foreground so it stays legible in dark mode; the orange symbol is left as-is.
  const themedLogoSvg = SUPERAGENT_LOGO_SVG.replace(/#0F0E0E/gi, themedColor('#F7F7F7'));

  return (
    <View style={styles.topBar}>
      <View style={styles.topBarRow}>
        <SvgXml xml={themedLogoSvg} height={LOGO_HEIGHT} width={LOGO_HEIGHT * SUPERAGENT_LOGO_ASPECT} />
      </View>
    </View>
  );
}