const IconArrowLeft = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="sui-CoverBasic-buttonIcon" viewBox="0 0 8 8">
    <path d="M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z" transform="translate(1)" />
  </svg>
)

const handleClick = () => {
  alert('click header')
}

const buttons1 = [
  {
    label: 'Go back',
    handleClick: () => { alert('Going back!') },
    icon: IconArrowLeft
  }
]

const buttons2 = [
  {
    label: 'To be a button with icon',
    handleClick: () => { alert('To be a button with icon...') },
    icon: IconArrowLeft
  },
  {
    label: 'Or not to be',
    handleClick: () => { alert('Or not to be') }
  }
]

return (
  <div>
    <div>Resize to see how the image behaves.</div>
    <div>#1 Full width - with gradient - with one button - clickable - with a title as children displayed</div>
    <div>#2 Forced to 60% width by its container - no gradient - with more buttons</div>
    <div>#3 Full width - no gradient - no buttons</div>
    <br />

    <h2>CoverBasic with Background Image & click</h2>

    <CoverBasic
      src="https://cdn.eyeem.com/thumb/15c515b9b1daf71c931edb83948f0835477294a7-1481844466433/2600/2600"
      height={200}
      buttons={buttons1}
      handleClick={handleClick}>
      <h1>I'm a title h1 passed as children. And I'm centered.</h1>
      <h2>I'm an h2 title</h2>
    </CoverBasic>
    <br />
    <br />
    <h2>CoverBasic 60% width with Background Image & click</h2>
    <div style={{ width: '60%', margin: 'auto' }}>
    <CoverBasic
    src="https://cdn.eyeem.com/thumb/1b54b2616d254e054a07ddffcda9a9e9a373e0b4-1382213729/1280/1280"
    height={400}
    buttons={buttons2}
    handleClick={handleClick}
    />
    </div>
    <br />
    <h2>CoverBasic with Sass var height, Background Image & click</h2>
    <CoverBasic
      gradient
      src="https://cdn.eyeem.com/thumb/0b51a3c8327c0bc87badd4c7c390f9d9c893d538-1355962452/1280/1280"
      handleClick={() => alert('Foto by the mighty Davecarter 😃')}>
      <h1>Cover title</h1>
      <h2>Cover subtitle</h2>
    </CoverBasic>
  </div>
)
