/**
 * Header — единая шапка экрана: [left slot] [title centered] [right slot].
 *
 * Правила выравнивания:
 *   - left/right принимают натуральную ширину контента (обычно 1-2
 *     IconButton'а 36px, или pressable-avatar 32px).
 *   - title (ReactNode, принимает как string, так и compound — аватар +
 *     имя вместе) всегда центрирован через flex:1 + alignItems:center.
 *     Абсолютно не позиционируется, т.к. при слишком широком title'е
 *     лучше ужать его, чем наложить на кнопки.
 *
 * `title` может быть строкой (тогда рендерится как Text 17px semibold)
 * либо произвольным node'ом — используется в chat detail для
 * [avatar][name + typing-subtitle] compound-блока.
 *
 * `divider` (default true) — тонкая 1px линия снизу; в tab-страницах
 * обычно выключена (TabHeader всегда ставит divider=false).
 */
import React, { ReactNode } from 'react';
import { View, Text } from 'react-native';

export interface HeaderProps {
  title?: ReactNode;
  left?:  ReactNode;
  right?: ReactNode;
  /** Показывать нижнюю тонкую линию-разделитель. По умолчанию true. */
  divider?: boolean;
}

export function Header({ title, left, right, divider = true }: HeaderProps) {
  return (
    <View
      style={{
        paddingHorizontal: 14,
        paddingVertical: 10,
        borderBottomWidth: divider ? 1 : 0,
        borderBottomColor: '#0f0f0f',
      }}
    >
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          minHeight: 44,
        }}
      >
        {/* Left slot — натуральная ширина, минимум 44 чтобы title
            визуально центрировался для одно-icon-left + одно-icon-right. */}
        <View style={{ minWidth: 44, alignItems: 'flex-start' }}>{left}</View>

        {/* Title centered */}
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          {typeof title === 'string' ? (
            <Text
              numberOfLines={1}
              style={{
                color: '#ffffff',
                fontSize: 17,
                fontWeight: '700',
                letterSpacing: -0.2,
              }}
            >
              {title}
            </Text>
          ) : title ?? null}
        </View>

        {/* Right slot — row, натуральная ширина, минимум 44. gap=4
            чтобы несколько IconButton'ов не слипались в selection-mode. */}
        <View style={{ minWidth: 44, flexDirection: 'row', justifyContent: 'flex-end', gap: 4 }}>
          {right}
        </View>
      </View>
    </View>
  );
}