import React from 'react';
import {Pressable, StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {InputSearch} from '@components';
import {Screens} from '@shared/constants';
import {SPACING} from '@shared/theme';

import ArchivedChats from '../ArchivedChats';

export function ChatsSubheader() {
  const {t} = useTranslation();
  const navigation = useNavigation();

  const onPressSearch = () => navigation.navigate(Screens.SEARCH_CHATS);

  return (
    <View style={styles.container}>
      <Pressable onPress={onPressSearch}>
        <InputSearch
          placeholder={t('general.search_chats')}
          editable={false}
          pointerEvents="none"
        />
      </Pressable>
      <ArchivedChats />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: SPACING['x0.5'],
    paddingHorizontal: SPACING.x2,
    marginVertical: SPACING.x1,
  },
});