import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconEdit} from '@tabler/icons-react-native';
import {Avatar, Button} from '@components';
import {useUser} from '@redux/selectors';
import {getCompleteName} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

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

function CreatePostButton({onPress, style}: Props) {
  const {t} = useTranslation();
  const user = useUser();
  const completeName = getCompleteName(user);
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
        style,
      ]}>
      <Avatar name={completeName} url={user.profilePicture} size="md" />
      <View style={styles.buttonContainer}>
        <Button
          size="sm"
          variant="secondary"
          IconLeft={IconEdit}
          text={t('home.create_post')}
          onPress={onPress}
        />
      </View>
    </View>
  );
}

export default CreatePostButton;