import React from 'react'
import { Box, Text } from 'frack-components'
import { storiesOf } from '@storybook/react'
import OverlapImage from './OverlapImage'
import { Section } from '@siteone/atoms'

const stories = storiesOf('Layouts/OverlapImage', module)
const ImageComponent = () => (
  <img
    src="https://source.unsplash.com/random/1920x1080"
    alt="macbook"
  />
)

const displayOnMobile = {
  s: 'block',
  ns: 'none',
}

stories.add('default', () => (
  <Section overflow="hidden">
    <OverlapImage imageComponent={ImageComponent}>
      <Text tag="h1" marginVertical={6}>
        Zapněte si kontokorent ve svém internetovém bankovnictví
      </Text>
      <Box marginBottom={6} display={displayOnMobile}>
        <ImageComponent />
      </Box>
      <Text tag="p" marginBottom={6}>
        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.
      </Text>
    </OverlapImage>
  </Section>
))

export default stories