import React, { PureComponent } from 'react'
import './ml.css'
import './grid.css'

export class GridItem extends PureComponent {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.isActive !== this.props.isActive
  }
  render() {
    const {className='', isActive, children} = this.props
    const active = isActive? `grid-item--active` : ''
    const activeClass = `ml-item grid-item ${className} ${active}`

    return (
      <div className={activeClass}>
        {children}
        <div className={'grid-item__overlay'}></div>
      </div>
    )
  }
}

const Image = ({id}) => {
  const rendition = '200.webp'
  const resource = 'https://media.giphy.com/media'
  const url = [resource, id, rendition].join('/')

  return <img src={url}
              alt={'Placeholder'} />
}

export const ImageGridItem = ({id, isActive}) => {
  return (
    <GridItem isActive={isActive}>
      <Image id={id}/>
    </GridItem>
  )
}

@@ -599,39 +599,8 @@
 %3E %7B%0A
-  const rendition = '200.webp'%0A
   co
@@ -614,17 +614,17 @@
 ource = 
-'
+%60
 https://
@@ -648,117 +648,262 @@
 edia
-'%0A  const url = %5Bresource, id, rendition%5D.join('/')%0A%0A  return %3Cimg src=%7Burl%7D%0A              alt=%7B'Placeholder'
+/$%7Bid%7D%60%0A%0A  return %3Cimg srcSet=%7B%60$%7Bresource%7D/200w.gif 200w, $%7Bresource%7D/200.webp 200w%60%7D%0A              sizes=%7B%22(max-width: 320px) 290px, (min-width: 321px) 200px%22%7D%0A              src=%7B%60$%7Bresource%7D/200.webp%60%7D%0A              alt=%7B%22Oh man, this gif is awesome.%22
 %7D /%3E

switch to gifs on mobile