import React from 'react'
import { text, boolean, withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'
import { Box } from 'frack-components'
import HalfToFullGrid from './HalfToFullGrid'

const stories = storiesOf('Layouts/HalfToFullGrid', module)

const backgroundImage = {
  backgroundImage: 'url("https://source.unsplash.com/random/1200x600")',
  backgroundPosition: '70% center',
}

stories.addDecorator(withKnobs)
stories.add('default', () => {
  const description = text(
    'text',
    'Se službou Odměny za placení si můžete u svých oblíbených obchodníků zapnout odměnu za placení a ušetřit. Za každý nákup s odměnou vám totiž část peněz vrátíme zpět na účet. Nakupovat s odměnou můžete v kamenných obchodech i e-shopech, třeba i v Albertu nebo u AliExpressu.',
  )
  const reverse = boolean('reverse', false)
  return (
    <HalfToFullGrid reverse={reverse}>
      <Box color="white" textAlign="center">{description}</Box>
      <Box width="100%" height="100%" bgSize="cover" style={backgroundImage} />
    </HalfToFullGrid>
  )
})

export default stories