import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Text from '@bufferapp/components/Text';

import ShopifyLogo from '../ShopifyLogo';


const ProfileHolder = styled.div `
  display: flex;
  align-items: center;
`;

const ShopifyProfile = ({ profile }) => (
  <ProfileHolder>
    <ShopifyLogo />
    <Text color="black" size="mini" weight="medium">{profile.username}</Text>
  </ProfileHolder>
);

ShopifyProfile.propTypes = {
  profile: PropTypes.shape({
    username: PropTypes.string,
  }).isRequired,
};

const ProfileIconStyled = styled(ShopifyProfile)`
  position: relative;
`;

export default ProfileIconStyled;