// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Box } from '../../../primitives/box';
import { Card, CardSection } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './CARDS-AND-SECTIONS.mkd';

storiesOf('Core/Structures/Cards', module)
  .add(
    'A card by itself',
    withDocs(docs, [Box])(() => (
      <Box colorName="background" spacing="p4">
        <Card spacing="p3">Hello I am a card</Card>
      </Box>
    )),
  )
  .add(
    'A card with two sections',
    withDocs(docs, [Box])(() => (
      <Box colorName="background" spacing="p4">
        <Card>
          <CardSection spacing="p3">Section one</CardSection>
          <CardSection spacing="p3">Section two</CardSection>
        </Card>
      </Box>
    )),
  )
  .add(
    'Cards with different spacings',
    withDocs(docs, [Box])(() => (
      <Box colorName="background" spacing="p4">
        <Card>
          <CardSection spacing="p1">p1 padding</CardSection>
          <CardSection spacing="p2">p2 padding</CardSection>
          <CardSection spacing="p3">p3 padding</CardSection>
          <CardSection spacing="p4">p4 padding</CardSection>
          <CardSection spacing="p5">p5 padding</CardSection>
        </Card>
      </Box>
    )),
  )
  .add(
    'with stacked prop',
    withDocs(docs, [Box])(() => (
      <Card stacked="row" justify="center" spacing="m4">
        <Box colorName="brand-secondary-bg" spacing="p3">
          Row Item - 1
        </Box>
        <Box colorName="brand-primary-base" spacing="p3">
          Row Item - 2
        </Box>
        <Box colorName="brand-secondary-base" spacing="p3">
          Row Item - 3
        </Box>
      </Card>
    )),
  );
