import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {translate} from 'react-i18next'

import CalendarIcon from 'react-icons/lib/fa/calendar-check-o'

const Event = ({event, t}) => (
  <div className='event'>
    <div className='icon'>
      <CalendarIcon />
    </div>
    <div>
      <h3>{event.name}</h3>
      <div>{moment(event.date).format('LL')}</div>
      {event.link ? (
        <div>
          <a href={event.link} download>{t('event.download')}</a>
        </div>
      ) : (
        <div>
          {event.linkComingSoon ?
            t('event.soonAvailable') :
            t('event.noReport')
          }
        </div>
      )}
    </div>

    <style jsx>{`
      @import 'colors';

      .event {
        border: 1px solid $lightgrey;
        padding: 1.4em 2em;
        border-radius: 2px;
        display: flex;
        align-items: center;

        @media (max-width: 551px) {
          padding: 1em 1.4em;
        }
      }

      h3 {
        margin-bottom: 0.4rem;
      }

      .icon {
        font-size: 3em;
        margin-right: 2rem;

        @media (max-width: 551px) {
          font-size: 2em;
          margin-right: 1.4rem;
        }
      }
    `}</style>
  </div>
)

Event.propTypes = {
  event: PropTypes.shape({
    name: PropTypes.string.isRequired,
    date: PropTypes.instanceOf(Date),
    link: PropTypes.string,
    linkComingSoon: PropTypes.bool
  }).isRequired,

  t: PropTypes.func.isRequired
}

export default translate('events')(Event)

@@ -187,16 +187,47 @@
 eck-o'%0A%0A
+import Button from './button'%0A%0A
 const Ev
@@ -429,24 +429,132 @@
 div%3E%0A      %7B
+event.subscribe ?%0A        %3CButton href=%7Bevent.subscribe%7D%3E%0A          Inscription%0A        %3C/Button%3E :%0A        
 event.link ?
@@ -556,38 +556,42 @@
 ink ? (%0A        
+  
 %3Cdiv%3E%0A
+  
           %3Ca hre
@@ -644,31 +644,35 @@
 /a%3E%0A        
+  
 %3C/div%3E%0A
+  
       ) : (%0A
@@ -671,38 +671,42 @@
   ) : (%0A        
+  
 %3Cdiv%3E%0A
+  
           %7Bevent
@@ -727,32 +727,34 @@
 n ?%0A            
+  
 t('event.soonAva
@@ -768,32 +768,34 @@
 ) :%0A            
+  
 t('event.noRepor
@@ -804,26 +804,30 @@
 )%0A          
+ 
+ 
 %7D%0A
+  
         %3C/di
@@ -835,17 +835,26 @@
 %3E%0A      
+ 
-)
+ )%0A      
 %7D%0A    %3C/
@@ -1558,16 +1558,49 @@
 string,%0A
+    subscribe: PropTypes.string,%0A
     link

add subscribe to next event