import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React, { useContext } from 'react'
import FeatherIcon from 'react-native-vector-icons/Feather'
import colors from '../../../constants/colors'
import { horizontalScale } from '../../../constants/metrics'
import { ThemeContext } from '../../../context/theme.context'

const Header = ({ headerStyle, children, backButtonShown, onBackClick, backIconTextComponent }) => {

  const styles = StyleSheet.create({
    headerContainer: {
      paddingHorizontal: horizontalScale(20),
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: 60,
      maxHeight: 60,
      // elevation: 4,
      backgroundColor: colors().dominant
    }
  })

  return (
    <View style={[styles.headerContainer, headerStyle]}>

      <View style={{ flexDirection: 'row', gap: horizontalScale(4), alignItems:'center' }}>
        <TouchableOpacity onPress={onBackClick}>
          {backButtonShown === true && backButtonShown !== undefined ? <FeatherIcon name='chevron-left' size={24} color={colors().recessive} /> : <></>}
        </TouchableOpacity>
        {backIconTextComponent}
      </View>
      {children}
    </View>
  )
}

export default Header

