// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { Box } from '../../../primitives/box';
import { Card, CardSection } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './CARDS-AND-SECTIONS.mkd';

storiesOf('Core/Structures/Cards', module)
  .addDecorator(withInfo(configDocs(docs, Card)))

  .add('A card by itself', () => (
    <Box colorName="background" spacing="p4">
      <Card spacing="p3">Hello I am a card</Card>
    </Box>
  ))
  .add('A card with two sections', () => (
    <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', () => (
    <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', () => (
    <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>
  ));
