import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { HeaderProps } from './header.props';
import { getStyles } from './header.styles';
import { useAppTheme } from '@theme';

export const Header: React.FC<HeaderProps> = ({ title, onBack, rightComponent }) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <View style={styles.backButton}>
        {onBack && (
          <TouchableOpacity onPress={onBack} activeOpacity={0.7}>
            <Text style={styles.backText}>{'<'}</Text>
          </TouchableOpacity>
        )}
      </View>
      <View style={styles.titleContainer}>
        <Text style={styles.title} numberOfLines={1}>{title}</Text>
      </View>
      <View style={styles.rightContainer}>
        {rightComponent}
      </View>
    </View>
  );
};