import React from 'react';

// TODO: Complete Impact component
const Impact = (props) => {
  const { 
    name,
    volunteering,
    friends,
    workImpact
  } = props.user

// TEMP ***************
  const tempDivStyle = {
    display: 'inline-block', 
    verticalAlign: 'top',
    marginLeft: '10px',
    marginRight: '10px',
  }

  const loremIpsumImageUrl = 'http://lorempixel.com/80/80';
//**********************

  return (
    // TODO: remove inline styles 
    <div style={{ textAlign: 'left' }}>
      <h4>Your Impact</h4>
     <div>
        <img src={loremIpsumImageUrl} />
        <div style={tempDivStyle}>
          <h3>{volunteering.hours} Volunteering Hours</h3>
          <h4>You rank ${volunteering.rank} in Saudi Arabia</h4>
        </div>
        <div>
          {/* Render Dynamically */}
          That's enough time to watch 900 movies!
        </div>
     </div>
     <div>
        <img src={loremIpsumImageUrl}/>
        <div style={tempDivStyle}>
          <h3>{friends.amount} Friends</h3>
          <h4>You rank ${friends.rank} among your friends</h4>
        </div>
        <div>
          {/* Render Dynamically */}
          That's enough people to make 10 football teams!
        </div>
     </div>
     <div>
        <img src={loremIpsumImageUrl} />
        <div style={tempDivStyle}>
          <h3>Your work impact is {workImpact.amount} {workImpact.currency}</h3>
          <h4>You rank ${volunteering.rank} in Saudi Arabia</h4>
        </div>
        <div>
          {/* Render Dynamically */}
          That's enough to buy a Mercedes!
        </div>
     </div>
   </div>

  );
}

export default Impact;
@@ -323,16 +323,41 @@
 '10px',%0A
+    marginBottom: '50px'%0A
   %7D%0A%0A  c
@@ -520,16 +520,31 @@
 : 'left'
+, minWidth: 800
  %7D%7D%3E%0A   
@@ -666,17 +666,17 @@
       %3Ch
-3
+4
 %3E%7Bvolunt
@@ -706,25 +706,25 @@
 ing Hours%3C/h
-3
+4
 %3E%0A          
@@ -797,32 +797,53 @@
 iv%3E%0A        %3Cdiv
+ style=%7BtempDivStyle%7D
 %3E%0A          %7B/* 
@@ -1040,17 +1040,17 @@
       %3Ch
-3
+4
 %3E%7Bfriend
@@ -1069,17 +1069,17 @@
 iends%3C/h
-3
+4
 %3E%0A      
@@ -1076,33 +1076,33 @@
 h4%3E%0A          %3Ch
-4
+5
 %3EYou rank $%7Bfrie
@@ -1124,33 +1124,33 @@
  your friends%3C/h
-4
+5
 %3E%0A        %3C/div%3E
@@ -1154,32 +1154,53 @@
 iv%3E%0A        %3Cdiv
+ style=%7BtempDivStyle%7D
 %3E%0A          %7B/* 
@@ -1406,17 +1406,17 @@
       %3Ch
-3
+4
 %3EYour wo
@@ -1476,9 +1476,9 @@
 %7D%3C/h
-3
+4
 %3E%0A  
@@ -1479,33 +1479,33 @@
 h4%3E%0A          %3Ch
-4
+5
 %3EYou rank $%7Bvolu
@@ -1529,33 +1529,33 @@
  Saudi Arabia%3C/h
-4
+5
 %3E%0A        %3C/div%3E
@@ -1559,32 +1559,53 @@
 iv%3E%0A        %3Cdiv
+ style=%7BtempDivStyle%7D
 %3E%0A          %7B/* 

Fix temporary styles