import React from 'react'
import { Story } from 'story'
import { theme } from 'theme'
import Text from 'components/elements/Text'
import Faq from './Faq'

export default { title: 'Patterns/Faq' }

export const Default = () => (
  <>
    <Story name='Faq' css={theme({ width: '100%' })}>
      <Faq
        title='Product Information'
        caption='All you need to know.'
        questions={[
          {
            question: 'How does it work?',
            answer: (
              <>
                <div>
                  <Text
                    as='span'
                    css={theme({ fontWeight: 'bold', color: 'black' })}
                  >
                    Microlink screenshot
                  </Text>{' '}
                  takes any URL as an input and returns a screenshot back,
                  hosted at Microlink CDN.
                </div>
                <div>
                  It supports most of the common browser interactions, like
                  clicks, wait for events, handle the scroll... but also some
                  extra things, like markup injection or overlay composition,
                  making it a more complete tool.
                </div>
              </>
            )
          }
        ]}
      />
    </Story>
  </>
)
