import React from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import Text from '@components/Text';
import GroupIcon, {GroupIconVariant} from '@modules/group/components/GroupIcon';
import {Group} from '@modules/group/interfaces';
import {COLORS} from '@shared/colors';
import {Screens} from '@shared/constants';

import {styles} from './styles';

interface Props {
  group: Group;
  iAmAdmin: boolean;
}

function GroupHeader({group, iAmAdmin}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();

  const onPressInfo = () =>
    navigation.navigate(Screens.GROUP_INFORMATION, {group});

  return (
    <View style={styles.container}>
      <GroupIcon icon={group.icon} variant={GroupIconVariant.Header} />
      <Pressable
        onPress={onPressInfo}
        style={[styles.textContainer, iAmAdmin && styles.textWidth]}>
        <Text variant="subtitle1" numberOfLines={1}>
          {group.title}
        </Text>
        <Text color={COLORS.GRAY_THIRTY_THREE} variant="body3">
          {t('group.see_group_info')}
        </Text>
      </Pressable>
    </View>
  );
}

export default GroupHeader;