import { StyleSheet, Text} from 'react-native'
import React, { useContext } from 'react'
import Header from '../../atoms/Header/Header'
import colors from '../../../constants/colors'
import { moderateScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'
import { ThemeContext } from '../../../context/theme.context'


const NewscoutCenteredTitleHeader = ({children, backButtonShown, onBackClick, title, titleStyle }) => {

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme
    const styles = StyleSheet.create({
        title: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(16),
            color: colors().recessive,
        },
        titleContainer:{
            flexDirection:'row',
            alignItems:'center',
            gap: 8

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

export default NewscoutCenteredTitleHeader
