import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import * as React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import ArrowLeft from 'svg/ArrowLeft';
import AppText from './AppText';

interface NavbarBackProps {
  title: string;
}

const NavbarBack = ({ title }: NavbarBackProps) => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const { top } = useSafeAreaInsets();
  return (
    <View style={[styles.header, { marginTop: top }]}>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <ArrowLeft color="#fff" width={20} height={20} />
      </TouchableOpacity>
      <AppText style={styles.headerTitle}>{title}</AppText>
    </View>
  );
};

export default NavbarBack;

const styles = StyleSheet.create({
  headerWrap: { flex: 1 },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#28A7E8',
    height: 60,
    paddingHorizontal: 12,
  },
  headerTitle: {
    color: '#fff',
    fontSize: 20,
    fontFamily: 'GolosText-Bold',
    marginLeft: 8,
  },
});
