import React, { useContext } from 'react';
import { Box, Button, Flex, HStack, Icon, Text, } from '../../themes/components';
import borderRadius from '../../themes/foundations/borderRadius';
import { ThemeContext } from 'styled-components';
import { ConfigServiceContext } from '../../utils/ConfigProvider';
import { useWindowDimensions, Platform } from 'react-native';
import { OrientationContext } from '../../services/OrientationContext';
const DrawerTabHeader = ({ onBackButtonClick, heading }) => {
    const { sessionConfig } = useContext(ConfigServiceContext);
    const { colors } = useContext(ThemeContext);
    const windowDimensions = useWindowDimensions();
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const { orientation } = React.useContext(OrientationContext);
    const isLandscape = orientation === 'LANDSCAPE';
    return (<Box position="absolute" zIndex={10} pt={Platform.OS === 'ios' && !isLandscape ? 42 : 3} bg="secondary.1000" width={width}>

			<HStack>

				<Box width={width / 3}>
					<Button onClick={onBackButtonClick}>
						<HStack border={`1px solid ${colors.danger[500]}`} borderRadius={borderRadius.small} left={20} p={8} width={80}>
							<Icon name="arrow-back" fill="danger.500"/>
							<Text ml={4} mr={4} color="danger.500">Back</Text>
						</HStack>
					</Button>
				</Box>
				<Flex width={width / 3} align="center" p={8}>
					<Text fontSize={16} fontWeight="bold" mb={10}>
						{' '}
						{heading}
					</Text>
				</Flex>
			</HStack>
		</Box>);
};
export default DrawerTabHeader;
//# sourceMappingURL=index.js.map