import React from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Avatar} from '@components/_HuGo/Avatar';
import {Typography} from '@components/_core/Typography';
import {useUser} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils';

import {styles} from './styles';

interface Props {
  onPress: () => void;
}

export function PublishPostButton({onPress}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const user = useUser();
  const userName = getCompleteName(user);

  return (
    <Pressable
      onPress={onPress}
      style={[styles.container, {backgroundColor: theme.neutralBgTerciary}]}>
      <Avatar name={userName} url={user.profilePicture} />
      <Typography color={theme.neutralTextLighter}>
        {t('general.write_something')}
      </Typography>
    </Pressable>
  );
}