import React from 'react'
import { number } from '@storybook/addon-knobs'

import { Offset } from './Offset'
import { Indicator } from './Indicator'
import { Segment } from './Segment'

export default {
  component: Offset,
  title: 'Offset'
}

const offsetKnob = () =>
  number('Offset', 0, {
    range: true,
    min: -50,
    max: 50,
    step: 1
  })

export const BlockElement = () => (
  <Offset offset={offsetKnob()}>
    <div style={{ textAlign: 'center' }}>This text is centered</div>
  </Offset>
)

export const InlineElement = () => (
  <Offset offset={offsetKnob()}>
    This a long text to see that inline elements get pushed far to the left. To
    be precise they get pushed half the container with to the left. Use
    text-align: center for better display.
  </Offset>
)

export const WithIndicator = () => (
  <Offset offset={offsetKnob()}>
    <Indicator>
      <Segment>Hello World</Segment>
    </Indicator>
  </Offset>
)