import React from 'react';
import PropTypes from 'prop-types';
import {
  Image,
  Text,
} from '@bufferapp/components';

const retweetPanelContainerStyle = {
  display: 'flex',
  alignItems: 'center',
};

const retweetHandleContainer = {
  display: 'flex',
  flexDirection: 'column',
  marginLeft: '1rem',
};

const RetweetPanel = ({
  name,
  handle,
  avatarUrl,
}) =>
  <div style={retweetPanelContainerStyle}>
    <Image
      src={avatarUrl}
      border={'circle'}
      height={'2rem'}
      width={'2rem'}
    />
    <div style={retweetHandleContainer}>
      <Text size={'small'}>{name}</Text>
      <Text size={'extra-small'}>{handle}</Text>
    </div>
  </div>;

RetweetPanel.propTypes = {
  name: PropTypes.string.isRequired,
  handle: PropTypes.string.isRequired,
  avatarUrl: PropTypes.string.isRequired,
};

export default RetweetPanel;