/**
 * TabHeader — общая шапка для всех tab-страниц (home/feed/notifications/wallet).
 *
 * Структура строго как в референсе Messages-экрана:
 *   [avatar 32 → /settings]   [title]   [right slot]
 *
 * Без нижнего разделителя (divider=false) — тот же уровень, что и фон экрана.
 *
 * Right-slot по умолчанию — шестерёнка → /settings. Но экраны могут передать
 * свой (например, refresh в wallet). Левый avatar — всегда клик-навигация в
 * settings, как в референсе.
 */
import React from 'react';
import { Pressable } from 'react-native';
import { useRouter } from 'expo-router';
import { useStore } from '@/lib/store';
import { Avatar } from '@/components/Avatar';
import { Header } from '@/components/Header';
import { IconButton } from '@/components/IconButton';

export interface TabHeaderProps {
  title: string;
  /** Right-slot. Если не передан — выставляется IconButton с settings-outline. */
  right?: React.ReactNode;
  /** Dot-color на profile-avatar'е (например, WS live/polling indicator). */
  profileDotColor?: string;
}

export function TabHeader({ title, right, profileDotColor }: TabHeaderProps) {
  const router   = useRouter();
  const username = useStore(s => s.username);
  const keyFile  = useStore(s => s.keyFile);

  return (
    <Header
      title={title}
      divider={false}
      left={
        <Pressable onPress={() => router.push('/(app)/settings' as never)} hitSlop={8}>
          <Avatar
            name={username ?? '?'}
            address={keyFile?.pub_key}
            size={32}
            dotColor={profileDotColor}
          />
        </Pressable>
      }
      right={
        right ?? (
          <IconButton
            icon="settings-outline"
            size={36}
            onPress={() => router.push('/(app)/settings' as never)}
          />
        )
      }
    />
  );
}