import { StyleSheet, View} from 'react-native'
import React from 'react'
import colors from '../../../constants/colors'
import Header from '../../atoms/Header/Header'
import { horizontalScale, moderateScale } from '../../../constants/metrics'
import NewscoutLogo from '../../atoms/Logo/NewscoutLogo'



const NewscoutHomeHeader = ({ children, backButtonShown, onBackClick, headerStyle, left}) => {
  

  const styles = StyleSheet.create({
    headerLogo: {
      height: moderateScale(64),
      width: moderateScale(64),
      marginLeft: backButtonShown ? horizontalScale(16) : 0 
    },
    header:{
      backgroundColor: colors().dominant,
      elevation: 4,
      shadowColor: colors().black,
      shadowOffset: {width: -2, height: 4},
      shadowOpacity: 0.2,
      shadowRadius: 3,
      alignItems:'center',
      // justifyContent: 'center'
    }
  })

  return (
    <Header headerStyle={[styles.header,headerStyle]}
      onBackClick={onBackClick}
      backButtonShown={backButtonShown}
      backIconTextComponent={<View style={{flexDirection: 'row',alignItems:'center', gap: horizontalScale(8)}}>
        { left }
        <NewscoutLogo style={styles.headerLogo} />
      </View>}
    >
      

      {children}
    </Header>
  )
}

export default NewscoutHomeHeader

