import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {ListRow} from '@components/_HuGo/List';
import {Pill} from '@components/_HuGo/Pill';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface MentionSuggestionUserItemData {
  id: string | number;
  title: string;
  subtitle?: string;
  profilePicture?: Nullable<string>;
  pillLabel?: string;
}

interface Props {
  item: MentionSuggestionUserItemData;
  onPress: () => void;
  style?: StyleProp<ViewStyle>;
}

export const MentionSuggestionUserItem = ({item, onPress, style}: Props) => {
  const {theme} = useTheme();

  return (
    <ListRow
      onPress={onPress}
      backgroundColor={theme.background.elements.default}
      style={[styles.profileContainer, style]}>
      <ListRow.Avatar url={item.profilePicture} name={item.title} />
      <ListRow.Title title={item.title} description={item.subtitle} />
      {item.pillLabel && (
        <View style={styles.marginLeft}>
          <Pill variant="neutral" size="sm" text={item.pillLabel} />
        </View>
      )}
    </ListRow>
  );
};
