import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {Trans} from 'react-i18next';
import {IconUsersGroup} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {ListRow} from '@components/_HuGo/List';
import {useTheme} from '@shared/theme';

interface Props {
  label: string;
  onPress: () => void;
  style?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
}

export const MentionAllItem = ({
  label,
  onPress,
  style,
  contentStyle,
}: Props) => {
  const {theme} = useTheme();

  return (
    <ListRow onPress={onPress} style={style}>
      <ListRow.Avatar Icon={IconUsersGroup} />
      <View style={contentStyle}>
        <ListRow.Title title={label} flex={false} />
        <Typography color={theme.text.neutral.lighter} variant="xs">
          <Trans
            i18nKey="chat.messages.mention_all_description"
            components={{
              bold: (
                <Typography
                  key="chat.messages.mention_all_description"
                  weight="semiBold"
                  variant="xs"
                />
              ),
            }}
          />
        </Typography>
      </View>
    </ListRow>
  );
};
