const images = [
  {
    alt: 'Alternate text for image 1',
    src: 'http://via.placeholder.com/350x350.png/000/fff?text=primary+1',
    thumb: 'http://via.placeholder.com/70.png/000/fff'
  },
  {
    alt: 'Alternate text for image 2',
    src: 'http://via.placeholder.com/150x250.png/666/094?text=primary+2',
    thumb: 'http://via.placeholder.com/30x50.png/666/094'
  },
  {
    alt: 'Alternate text for image 3',
    src: 'http://via.placeholder.com/350x150.png/fe0/045?text=primary+3',
    thumb: 'http://via.placeholder.com/70x30.png/fe0/045'
  },
  {
    alt: 'Alternate text for image 4',
    src: 'http://via.placeholder.com/750x450.png/cc9/224?text=primary+4',
    thumb: 'http://via.placeholder.com/110x70.png/cc9/224'
  }
]

const clickCallback = (image) => alert('clicked on image ' + image.src)

const actions = [
  {
    callback: (image) => alert('Clicked on action 1 with image ' + image.src),
    node: <div>Action 1</div>
  },
  {
    callback: (image) => alert('Clicked on action 2 with image ' + image.src),
    node: <div>Action 2</div>
  },
  {
    callback: (image) => alert('Clicked on action 3 with image ' + image.src),
    node: <div>Action 3</div>
  }
]

const emptyImage = 'data:image/png;base64,[encoded data, 23432 characters]'

const defaultAlt = 'Text not available'

return (
  <div>
    <h2>Picker sin imágenes</h2>
    <div style={{width: '40%'}}>
      <ImagePicker emptyImage={emptyImage} defaultAlt={defaultAlt} />
    </div>

    <h2>Picker con al menos una imagen</h2>
    <div style={{width: '40%'}}>
      <ImagePicker images={images} emptyImage={emptyImage} defaultAlt={defaultAlt} />
    </div>

    <h2>Picker con al menos dos imágenes y seleccionada la segunda</h2>
    <div style={{width: '40%'}}>
      <ImagePicker images={images} emptyImage={emptyImage} defaultAlt={defaultAlt} selected={1} />
    </div>

    <h2>Picker con callback</h2>
    <div style={{width: '40%'}}>
      <ImagePicker images={images} onClick={clickCallback} emptyImage={emptyImage} defaultAlt={defaultAlt} />
    </div>

    <h2>Picker con barra de acciones</h2>
    <div style={{width: '40%'}}>
      <ImagePicker images={images} actions={actions} emptyImage={emptyImage} defaultAlt={defaultAlt}  />
    </div>
  </div>
)
