/* eslint react/react-in-jsx-scope:0, react/jsx-no-undef:0 */

const IconPlay = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'>
  <path fill='none' d='M0,0h24v24H0V0z' />
  <path d='M32,64C14.3,64,0,49.7,0,32S14.3,0,32,0s32,14.3,32,32S49.7,64,32,64z M32,4C16.5,4,4,16.5,4,32s12.5,28,28,28 s28-12.5,28-28S47.5,4,32,4z' />
  <polygon points='26,46.9 26,17.1 44,32' />
</svg>

const cardStyles = {
  width: 360,
  float: 'left',
  marginBottom: '15px',
  marginRight: '15px'
}

return (
  <div>
    <div style={cardStyles}>
      <CardArticle
        link='https://github.com/SUI-Components/sui-components'
        media={{
          src: 'http://lorempicsum.com/simpsons/360/180/1',
          alt: 'Article card'
        }}
        tag={{
          url: 'http://www.coches.net/novedades/',
          text: 'News'
        }}
        comments={{
          url: 'http://www.coches.net/opiniones/nuevo-hyundai-i10-presentacion',
          count: 109
        }}
        title='Article card'
        description='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptatum minus nihil, eum perspiciatis?'
      />
    </div>
    <div style={cardStyles}>
      <CardArticle
        link='https://github.com/SUI-Components/sui-components'
        media={{
          src: 'http://lorempicsum.com/simpsons/360/300/4',
          alt: 'Featured article card with lazy load'
        }}
        tag={{
          url: 'http://www.coches.net/pruebas/',
          text: 'Featured'
        }}
        comments={{
          url: 'http://www.coches.net/videos/bmw-serie_4-gts#ctrl_comments',
          count: 2
        }}
        featured
        title='Featured article card with lazy load'
        description='Cras ac justo nunc. Vestibulum dignissim bibendum eros, porttitor maximus eros ullamcorper vitae. Quisque ut suscipit risus. Duis a turpis in metus rutrum volutpat.'
        lazyLoad={{ debounce: true, offsetVertical: 300, aspectRatio: '4:3' }}
      />
    </div>
    <div style={cardStyles}>
      <CardArticle
        link='http://www.nooooooooooooooo.com/'
        media={{
          src: 'http://lorempicsum.com/simpsons/360/180/3',
          icon: IconPlay,
          alt: 'Video article card'
        }}
        tag={{
          url: 'http://www.nooooooooooooooo.com/',
          text: 'Video'
        }}
        comments={{
          url: 'http://www.nooooooooooooooo.com/',
          count: 109
        }}
        video
        title='Video article card'
        description='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptatum minus nihil, eum perspiciatis?'
      />
    </div>
  </div>
)
