import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import React from 'react'
import { GlobalTheme } from '../theme'

const CustomHeader = ({ title, leftIcon, rightIcon, onLeftPress, onRightPress }) => {

    return (
        <View style={styles.headerStyle}>
            {leftIcon &&
                <TouchableOpacity onPress={onLeftPress} style={styles.leftSection}>
                    {leftIcon && <Image source={leftIcon} style={styles.leftIconStyle} />}
                </TouchableOpacity>
            }

            <View style={styles.titleContainer}>
                <Text style={styles.headerText}>{title}</Text>
            </View>

            <TouchableOpacity onPress={onRightPress} style={styles.rightSection}>
                {rightIcon && <Image source={rightIcon} style={styles.rightIconStyle} />}
            </TouchableOpacity>
        </View>
    )
}

export default CustomHeader

const styles = StyleSheet.create({
    headerStyle: {
        height: '8%',
        backgroundColor: '#113F8C',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
    },
    leftSection: {
        backgroundColor: '#295398',
        flexDirection: 'row',
        padding: 8,
        alignItems: 'center',
        borderRadius: 20
        // width: 70,
    },
    rightSection: {
        alignItems: 'flex-end',
        width: 40,
    },
    titleContainer: {
        flex: 1,
        alignItems: 'center',
    },
    headerText: {
        color: GlobalTheme.colors.white,
        fontSize: GlobalTheme.typography.fontSize.medium,
        fontWeight: '600',
    },
    backText: {
        marginLeft: 6,
        color: GlobalTheme.colors.white,
        fontSize: GlobalTheme.typography.fontSize.small,
    },
    leftIconStyle: {
        height: 20,
        width: 20,
        resizeMode: 'contain',
    },
    rightIconStyle: {
        height: 35,
        width: 35,
        resizeMode: 'contain',
    },
})