import React from 'react'
import { Text } from 'frack-components'
import { text, withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'
import ThirdToFullGrid from './ThirdToFullGrid'
import { YouTube, Section } from '@siteone/atoms'


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

stories.addDecorator(withKnobs)
stories.add('default', () => {
  const mockData = {
    title: text('title', 'Zapněte si kontokorent ve svém internetovém bankovnictví'),
    text: text('text', 'Náš kontokorent si můžete kdykoliv zapnout ve svém internetovém bankovnictví v části Půjčky a hypotéky. Můžete jej také zapnout na pobočce, když budete mít cestu kolem. Každou žádost o kontokorent co nejdříve posoudíme a v některých případech po vás možná budeme chtít i nějaký doklad.'),
  }
  const opts = {
    width: '100%',
    height: '100%',
  }
  return (
    <Section overflow="hidden">
      <ThirdToFullGrid>
        <React.Fragment>
          <Text tag="h1" marginBottom={4} innerHTML={mockData.title} />
          <Text tag="p" innerHTML={mockData.text} />
        </React.Fragment>
        <YouTube videoId="Oc7S5oWuF7g" opts={opts} containerClassName="w-100 h-100 db" />
      </ThirdToFullGrid>
    </Section>
  )
})

export default stories