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


const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onBackClick}) => {
    
    const styles = StyleSheet.create({
        title: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(16),
            color: colors().recessive,
        },
        titleContainer:{
            flexDirection:'row',
            alignItems:'center',
            gap: 8
    
        }
    })

    return (
        <Header 
            backButtonShown={backButtonShown} 
            onBackClick={onBackClick}
            backIconTextComponent={
                <Text style={[styles.title, titleStyle]}>{title ?? "Title"}</Text>
            }   
        
        >
            {/* <View style={styles.titleContainer}> */}
               
                
                
                {children}
            {/* </View> */}
            
        </Header>
    )
}

export default NewscoutTitleHeader