import React from 'react';
import classNames from 'classnames';
import { pickAvatar } from '../lib/collective.lib';
import { imagePreview } from '../lib/utils';

export default ({ src, radius, id, title, className }) => {
  const image = imagePreview(src, null, { width: radius });
  return (
    <div
      className={classNames('Avatar', className)}
      style={{
        width: radius,
        height: radius,
        backgroundImage: `url(${pickAvatar(id || title || src)})`,
      }}
    >
      <style jsx>
        {`
          .Avatar {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px #75cc1f;
          }
          .noFrame {
            border: 0px;
            border-radius: 50%;
            box-shadow: none;
          }
          .image {
            background-repeat: no-repeat;
            background-position: center center;
            border-radius: 50%;
            background-size: cover;
          }
        `}
      </style>
      {image && (
        <div
          className="image"
          style={{
            backgroundImage: `url(${image})`,
            width: radius,
            height: radius,
          }}
        />
      )}
    </div>
  );
};

@@ -31,87 +31,226 @@
 ort 
-classNames from 'classnames';%0Aimport %7B pickAvatar %7D from '../lib/collective.lib
+PropTypes from 'prop-types';%0Aimport styled from 'styled-components';%0Aimport %7B backgroundImage, borders, borderColor, size, themeGet %7D from 'styled-system';%0Aimport tag from 'clean-tag';%0Aimport %7B Flex %7D from 'grid-styled
 ';%0Ai
@@ -297,23 +297,24 @@
 s';%0A
-%0Aex
+im
 port
+ %7B
  default
  (%7B 
@@ -313,429 +313,381 @@
 ault
- (%7B src, radius, id, title, className %7D)
+Image %7D from '../constants/collectives';%0A%0Aconst getInitials = name
  =%3E 
-%7B%0A  const image = imagePreview(src, null, %7B width: radius %7D);%0A  return (%0A    %3Cdiv%0A      className=%7BclassNames('Avatar', className)%7D%0A      style=%7B%7B%0A        width: radius,%0A        height: radius,%0A        backgroundImage: %60url($%7BpickAvatar(id %7C%7C title %7C%7C src)%7D)%60,%0A      %7D%7D%0A    %3E%0A      %3Cstyle jsx%3E%0A        %7B%60%0A          .Avatar %7B%0A            background-repeat: no-repeat;%0A          
+(%0A  name%0A    .split(' ')%0A    .reduce((result, value) =%3E result += value.slice(0, 1).toUpperCase(), '')%0A);%0A%0Aexport const StyledAvatar = styled(Flex)%60%0A  align-items: center;%0A  background-color: $%7B(%7Btheme, type%7D) =%3E type === 'USER' ? themeGet('colors.black.100')(%7B theme %7D) : 'none'%7D;%0A  $%7BbackgroundImage%7D%0A
   ba
@@ -718,32 +718,54 @@
 r center;%0A  
-        
+background-repeat: no-repeat;%0A
   background
@@ -774,34 +774,24 @@
 ize: cover;%0A
-          
   border-rad
@@ -799,460 +799,576 @@
 us: 
-50%25;%0A            overflow: hidden;%0A            border: 2px solid #fff;%0A            box-shadow: 0 0 0 1px #75cc1f;%0A          %7D%0A          .noFrame %7B%0A            border: 0px;%0A            border-radius: 50%25;%0A            box-shadow: none;%0A          %7D%0A          .image %7B%0A            background-repeat: no-repeat;%0A            background-position: center center;%0A            border-radius: 50%25;%0A            background-size: cover;%0A          %7D%0A        %60
+$%7B(%7B type %7D) =%3E type === 'USER' ? '100px' : '25%25'%7D;%0A  $%7Bborders%7D%0A  $%7BborderColor%7D%0A  color: $%7BthemeGet('colors.black.400')%7D;%0A  font-weight: bold;%0A  justify-content: center;%0A  overflow: hidden;%0A  $%7Bsize%7D%0A%60;%0A%0AStyledAvatar.defaultProps = %7B%0A  blacklist: tag.defaultProps.blacklist.concat('backgroundImage'),%0A%7D;%0A%0Aconst Avatar = (%7B src, type = 'USER', radius, name, ...styleProps %7D) =%3E %7B%0A  const image = imagePreview(src, defaultImage%5Btype%5D, %7B width: radius %7D);%0A  return (%0A    %3CStyledAvatar%0A      backgroundImage=%7B%60url($%7Bimage%7D)%60%7D%0A      size=%7Bradius%7D%0A      type=%7Btype
 %7D%0A      
 %3C/st
@@ -1367,15 +1367,28 @@
     
-%3C/
+%7B...
 style
+Props%7D%0A    
 %3E%0A  
@@ -1392,16 +1392,17 @@
 %0A      %7B
+!
 image &&
@@ -1406,219 +1406,287 @@
  && 
-(%0A        %3Cdiv%0A          className=%22image%22
+type === 'USER' && name && (%0A        %3Cspan%3E%7BgetInitials(name)%7D%3C/span%3E
 %0A      
+)%7D%0A
     
-s
+%3C/S
 tyle
-=%7B%7B%0A            backgroundImage: %60url($%7Bimage%7D)%60,%0A            width: radius,%0A            height: radius,%0A          %7D%7D%0A        /%3E%0A      )%7D%0A    %3C/div%3E%0A  );%0A%7D
+dAvatar%3E%0A  );%0A%7D;%0A%0AAvatar.propTypes = %7B%0A  name: PropTypes.string,%0A  src: PropTypes.string,%0A  type: PropTypes.oneOf(%5B'USER', 'COLLECTIVE', 'ORGANIZATION', 'CHAPTER'%5D),%0A%7D;%0A%0Aexport default Avatar
 ;%0A

implement new design system