import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import NewsletterBlock from 'js/patterns/organisms/blocks/newsletter'
import Summary from 'js/patterns/organisms/blocks/summary'
import CreditCard from 'js/patterns/organisms/blocks/creditcard'
import Addressblock from 'js/patterns/organisms/blocks/addressblock'
import DeliveryFeatures from 'js/patterns/organisms/blocks/delivery-features'

<Meta title='4.Organisms|Blocks' />

# Blocks

## Creditcard
<Preview withToolbar>
    <Story name='Creditcard'>
        <CreditCard />
    </Story>
</Preview>

## Media
<Preview withToolbar>
    <Story name='Media'>
        <div className='o-media-block'>
            <div className='o-media-block__asset'>
                <img src='https://images.unsplash.com/photo-1510598969022-c4c6c5d05769?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80' alt='' />
            </div>
            <div className='o-media-block__body'>
                <p className='c-topic u-text-light'>Topic</p>
                <h2 className='c-title'>Media Block</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut cum quisquam excepturi nisi neque, ea fuga, odio expedita quis dicta vero? Animi molestias minus ad possimus deserunt laboriosam tempora sit!</p>
            </div>
        </div>
    </Story>
</Preview>

## Newsletter
<Preview withToolbar>
    <Story name='Newsletter'>
        <NewsletterBlock />
    </Story>
</Preview>

## Summary
<Preview withToolbar>
    <Story name='Summary'>
        <Summary sum={12430} />
    </Story>
</Preview>

## Address
<Preview withToolbar>
    <Story name='Address'>
        <Addressblock />
    </Story>
</Preview>

## Delivery Features
<Preview withToolbar>
    <Story name='Delivery Features'>
        <DeliveryFeatures />
    </Story>
</Preview>