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 { horizontalScale, moderateScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'
import Header from '../../atoms/Header/Header'


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

    return (
        <Header 
            headerStyle={headerStyle}
            backButtonShown={backButtonShown} 
            onBackClick={onBackClick}
            backIconTextComponent={
                <View style={{flexDirection:'row',gap: horizontalScale(16),alignItems:'center'}}>
                    {left}
                    <Text style={[styles.title, titleStyle]}>{title}</Text>
                </View>
              
            }   
        
        >
            {/* <View style={styles.titleContainer}> */}
               
                
                
                {children}
            {/* </View> */}
            
        </Header>
    )
}

export default NewscoutTitleHeader

