// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Head1, Head2, Head3, Head4, Head5 } from './index';
import { Box } from '../../../primitives/box';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './HEAD.mkd';

storiesOf('Core/Text/Head', module)
  .add(
    'default',
    withDocs(docs, [Box])(() => (
      <Box spacing="p5">
        <Head1>Head 1</Head1>
        <Head2>Head 2</Head2>
        <Head3>Head 3</Head3>
        <Head4>Head 4</Head4>
        <Head5>Head 5</Head5>
      </Box>
    )),
  )
  .add(
    'centered',
    withDocs(docs, [Box])(() => (
      <Box spacing="p5">
        <Head1 align="center">Head 1</Head1>
        <Head2 align="center">Head 2</Head2>
        <Head3 align="center">Head 3</Head3>
        <Head4 align="center">Head 4</Head4>
        <Head5 align="center">Head 5</Head5>
      </Box>
    )),
  )
  .add(
    'with different font size',
    withDocs(docs, [Box])(() => (
      <Box spacing="p5">
        <Head1 fontSize="f7">Head 1 - f7</Head1>
        <Head2 fontSize="f5">Head 2 - f5</Head2>
        <Head3 fontSize="f3">Head 3 - f3</Head3>
        <Head4 fontSize="f2">Head 4 - f2</Head4>
        <Head5 fontSize="f1">Head 5 - f1</Head5>
      </Box>
    )),
  );
