import React from "react";
import { View } from "react-native";
import { Text } from "./text";
import { useAppConfig } from "../context/AppConfigContext";

export interface BrandHeaderProps {
  /** Icon size in pixels. Wordmark text scales relative. */
  size?: number;
  /** Hide the wordmark and show just the icon. Useful in tight headers. */
  iconOnly?: boolean;
}

/**
 * Brand header — pairs the configured `AppConfig.Logo` with the `appName`
 * wordmark. Apps register their logo + name via `AppConfigProvider`; this
 * widget renders them at a uniform size across screens (welcome, login,
 * settings header, extension popup header).
 */
export function BrandHeader({ size = 32, iconOnly = false }: BrandHeaderProps) {
  const { appName, Logo } = useAppConfig();
  return (
    <View className="flex-row items-center" style={{ gap: 10 }}>
      <Logo width={size} height={size} />
      {iconOnly ? null : (
        <Text
          className="font-sans-bold text-foreground"
          style={{ fontSize: Math.round(size * 0.6), letterSpacing: -0.5 }}
        >
          {appName}
        </Text>
      )}
    </View>
  );
}