import React from 'react';
import Router from 'next/router';
import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import { Colors, Paddings } from '../../styles';
import TabNavigator from '../TabNavigator';

const logoSource = require('../../../assets/logo-with-title-small.png');

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    shadowRadius: 3,
    shadowColor: Colors.SHADOW.toString(),
    shadowOffset: {
      height: 0.5,
      width: 0,
    },
    paddingLeft: Paddings.MIN_X,
  },
  logoContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  logo: {
    height: 40,
    width: 150,
  },
});

export default function Header() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => Router.push('/map')}
        activeOpacity={0.5}
        style={styles.logoContainer}>
        <Image style={styles.logo} source={logoSource} resizeMode="cover" />
      </TouchableOpacity>
      <TabNavigator />
    </View>
  );
}