import React, {ReactNode} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography} from '@components/_core';
import {Avatar, AvatarGroup} from '@components/_HuGo';

import {styles} from './styles';

export interface AuthorData {
  name: string;
  avatarUrl: string;
  id: number;
}

interface Props {
  author: AuthorData;
  target?: AuthorData;
  children?: ReactNode;
}

export function Author({author, target, children}: Props) {
  const {t} = useTranslation();

  return (
    <View style={styles.authorContainer}>
      {target ? (
        <AvatarGroup
          list={[
            {
              url: author.avatarUrl,
              name: author.name,
              id: author.id,
            },
            {
              url: target.avatarUrl,
              name: target.name,
              id: target.id,
            },
          ]}
        />
      ) : (
        <Avatar url={author.avatarUrl} name={author.name} />
      )}
      <View style={styles.textContainer}>
        <Typography variant="s" weight="semiBold">
          {author.name}
          {target && (
            <>
              <Typography>
                {` ${t('drafts.steps.post.in_the_name_of')} `}
              </Typography>
              <Typography variant="s" weight="semiBold">
                {target.name}
              </Typography>
            </>
          )}
        </Typography>
        {children}
      </View>
    </View>
  );
}
