import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import Header from '../../atoms/Header'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import FeatherIcon from 'react-native-vector-icons/dist/Feather'

const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onBackClick }) => {
    return (
        <Header>
            <View style={styles.titleContainer}>
                {backButtonShown === true && backButtonShown !== undefined ? <TouchableOpacity onPress={onBackClick}>
                    <FeatherIcon name={'chevron-left'} size={24} color={colors.black} />
                </TouchableOpacity> : <View></View>}
                
                <Text style={[styles.title, titleStyle]}>{title ?? "Title"}</Text>
            </View>
            {children}
        </Header>
    )
}

export default NewscoutTitleHeader

const styles = StyleSheet.create({
    title: {
        fontFamily: fonts.type.regular,
        fontSize: fonts.getSize(16),
        color: colors.black,
    },
    titleContainer:{
        flexDirection:'row',

    }
})