import React, { FC, ReactNode } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { styles } from './style';

import ChevronLeft from '../../../assets/icons/chevron-left.svg';

type Props = {
  label: string;
  rightElement?: ReactNode;
};

export const Header: FC<Props> = ({ label, rightElement }) => {
  const navigation = useNavigation();

  // navigation.setOptions() TODO

  return (
    <View style={styles.wrapper}>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <View style={styles.chevronWrapper}>
          <ChevronLeft />
        </View>
      </TouchableOpacity>
      <Text style={styles.label}>{label}</Text>
      <View>{rightElement ? rightElement : <Text>Text</Text>}</View>
    </View>
  );
};