import React from 'react';
import { createComponent, border } from 'olymp-fela';
import { LightboxImage } from 'olymp-cloudinary';

const Avatar = createComponent(
  ({ theme }) => ({
    float: 'right',
    margin: theme.space2,
    marginRight: `-${theme.space3}`,
  }),
  ({ className, value }) =>
    (<LightboxImage
      className={className}
      value={value}
      width={100}
      ratio={1}
      avatar
      rounded
    />),
  p => Object.keys(p)
);

const H3 = createComponent(
  ({ theme, color }) => ({
    borderBottom: border(theme, color),
    display: 'inline',
    paddingRight: theme.space1,
  }),
  'h3',
  ({ color, ...p }) => Object.keys(p)
);

export default createComponent(
  ({ theme }) => ({
    marginTop: theme.space3,
    marginBottom: theme.space4,
    display: 'block',
    clear: 'both',
    hyphens: 'auto',
    '> p': {
      textAlign: 'justify',
    },
  }),
  ({ className, name, image, description, color }) =>
    (<div className={className}>
      <Avatar value={image} />
      <H3 color={color}>
        {name}
      </H3>
      <p>
        {description}
      </p>
    </div>),
  p => Object.keys(p)
);

@@ -293,22 +293,23 @@
 ue %7D) =%3E
+ (
 %0A    
-(
 %3CLightbo
@@ -420,22 +420,24 @@
     
-rounded
+circle
 %0A    /%3E
+%0A  
 ),%0A 
@@ -452,24 +452,25 @@
 ject.keys(p)
+,
 %0A);%0A%0Aconst H
@@ -659,24 +659,25 @@
 ject.keys(p)
+,
 %0A);%0A%0Aexport 
@@ -955,14 +955,15 @@
 ) =%3E
+ (
 %0A    
-(
 %3Cdiv
@@ -991,16 +991,28 @@
 %7D%3E%0A     
+ %7B!!image &&
  %3CAvatar
@@ -1028,16 +1028,17 @@
 mage%7D /%3E
+%7D
 %0A      %3C
@@ -1058,30 +1058,14 @@
 or%7D%3E
-%0A        %7Bname%7D%0A      
+%7Bname%7D
 %3C/H3
@@ -1079,17 +1079,8 @@
  %3Cp%3E
-%0A        
 %7Bdes
@@ -1088,23 +1088,16 @@
 ription%7D
-%0A      
 %3C/p%3E%0A   
@@ -1103,16 +1103,19 @@
   %3C/div%3E
+%0A  
 ),%0A  p =
@@ -1130,12 +1130,13 @@
 .keys(p)
+,
 %0A);%0A

fix issues in gzk -> org -> person