managarten/apps/reader/apps/mobile/components/Header.tsx

import React from 'react';
import { View, Pressable, Platform, StatusBar } from 'react-native';
import { router } from 'expo-router';
import { Icon } from './Icon';
import { Text } from './Text';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '~/hooks/useTheme';

interface HeaderProps {
  title?: string;
  showBackButton?: boolean;
  rightComponent?: React.ReactNode;
  onBackPress?: () => void;
  backgroundColor?: string;
  textColor?: string;
}

export const Header: React.FC<HeaderProps> = ({
  title,
  showBackButton = true,
  rightComponent,
  onBackPress,
  backgroundColor,
  textColor,
}) => {
  const insets = useSafeAreaInsets();
  const { isDark, colors } = useTheme();

  const handleBackPress = () => {
    if (onBackPress) {
      onBackPress();
    } else {
      router.back();
    }
  };

  // Use theme colors if not explicitly provided
  const headerBackgroundColor = backgroundColor || (isDark ? colors.tabBarBackground : '#ffffff');
  const headerTextColor = textColor || (isDark ? '#ffffff' : '#000000');
  const borderColor = isDark ? colors.tabBarBorder : '#e5e7eb';

  return (
    <View
      style={{
        backgroundColor: headerBackgroundColor,
        paddingTop: insets.top,
        paddingBottom: 12,
        paddingHorizontal: 16,
        borderBottomWidth: 1,
        borderBottomColor: borderColor,
      }}>
      <StatusBar
        barStyle={isDark ? 'light-content' : 'dark-content'}
        backgroundColor={headerBackgroundColor}
      />

      <View className="min-h-[44px] flex-row items-center justify-between">
        {/* Left side - Back button */}
        <View className="flex-1 flex-row items-center">
          {showBackButton && (
            <Pressable
              onPress={handleBackPress}
              className="-ml-2 mr-3 rounded-full p-2"
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="arrow-back" size={24} color={headerTextColor} />
            </Pressable>
          )}
        </View>

        {/* Center - Title */}
        <View className="flex-2 items-center">
          {title && (
            <Text
              variant="h4"
              color={headerTextColor === '#000000' ? 'black' : 'white'}
              className="text-center font-semibold"
              numberOfLines={1}
              ellipsizeMode="tail">
              {title}
            </Text>
          )}
        </View>

        {/* Right side - Custom component */}
        <View className="flex-1 flex-row items-center justify-end">{rightComponent}</View>
      </View>
    </View>
  );
};