import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useAppColors, spacing } from '../../theme';
import { AppBackButton, Text } from './index';

interface SimpleHeaderProps {
  title: string;
  onBack: () => void;
  rightComponent?: React.ReactNode;
}

export const SimpleHeader: React.FC<SimpleHeaderProps> = ({ title, onBack, rightComponent }) => {
  const colors = useAppColors();

  return (
    <View style={[styles.header, { backgroundColor: colors.background.paper }]}>
      <AppBackButton onPress={onBack} style={styles.backButton} />
      <Text style={[styles.title, { color: colors.text.primary }]} numberOfLines={1}>
        {title}
      </Text>
      {rightComponent ? (
        <View style={styles.rightContainer}>
          {rightComponent}
        </View>
      ) : (
        <View style={styles.rightPlaceholder} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 52,
    paddingHorizontal: spacing.xs,
  },
  title: {
    flex: 1,
    fontSize: 17,
    fontWeight: '600',
    marginLeft: spacing.xs,
  },
  rightContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rightPlaceholder: {
    width: 40,
  },
  backButton: {
    marginLeft: 0,
  },
});
