import React from 'react';
import PropTypes from 'prop-types';

import { Header } from 'react-native-elements';

import HeaderTitle from './HeaderTitle/HeaderTitle.container.js';
import HeaderContentLeft from './HeaderContentLeft.container.js';
import HeaderContentRight from './HeaderContentRight.container.js';

import styles from './AppHeader.styles.js';

export default function AppHeader({ navigation }) {
  return (
    <Header
      placement="left"
      leftComponent={<HeaderContentRight navigation={navigation} />}
      centerComponent={<HeaderTitle navigation={navigation} />}
      rightComponent={<HeaderContentLeft navigation={navigation} />}
    />
  );
}

AppHeader.propTypes = {
  navigation: PropTypes.func.isRequired,
};