import * as React from 'react';
import {StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {normalize} from '../../utils';

type MessagesHeaderProps = {
  createChannel: () => void;
};

const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
  return (
    <View style={styles.header}>
      <Text style={styles.headerText}>Messages</Text>
      <Text style={styles.unreadText}>2 unread</Text>
      <View style={styles.flex} />
      <TouchableOpacity
        style={styles.compose}
        onPress={createChannel}>
        <Text>Compose</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  header: {
    marginHorizontal: '8%',
    marginTop: '5%',
    alignItems: 'center',
    flexDirection: 'row',
  },
  headerText: {
    fontWeight: '700',
    fontSize: normalize(18),
    lineHeight: normalize(21),
  },
  unreadText: {
    color: '#8F01FF',
    marginLeft: 10,
    fontWeight: '700',
    lineHeight: normalize(17),
    fontSize: normalize(14),
  },
  compose: {},
});

export default MessagesHeader;