import React from 'react';
import {Pressable, Share, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCopy, IconLink} from '@tabler/icons-react-native';
import {Avatar, Typography, IconButton} from '@components';
import {HUMAND_URL} from '@shared/keys';
import {copyToClipboard} from '@shared/utils';

import {styles} from './styles';

interface Props {
  groupId: number;
}

function ShareItem({groupId}: Props) {
  const {t} = useTranslation();
  const onShare = () =>
    Share.share({
      message: `${HUMAND_URL}groups/${groupId}`,
    });
  const onCopy = () =>
    copyToClipboard({text: `${HUMAND_URL}groups/${groupId}`});

  return (
    <View style={styles.container}>
      <Pressable onPress={onShare} style={styles.linkContainer}>
        <Avatar Icon={IconLink} variant="primary" />
        <View style={styles.textContainer}>
          <Typography weight="semiBold">
            {t('general.share_invitation_link')}
          </Typography>
        </View>
      </Pressable>
      <View style={styles.shareButtonContainer}>
        <IconButton onPress={onCopy} Icon={IconCopy} variant="flat" />
      </View>
    </View>
  );
}

export default ShareItem;