import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
import MediaText from './'

<Meta title="Components/Organisms/MediaText" component={MediaText} />

# Component

Use this to display media and text in a 50/50 layout.

<Canvas>
  <Story name="Component">
    <MediaText
      title="New Designs"
      body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
      image={{
        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
        alt: 'Some alt text'
      }}
      cta={{icon: 'arrowRight', text: 'Take a look'}}
    />
  </Story>
</Canvas>

## Media Left

Media will display on the right on large screens by default. Use the `mediaLeft` prop to display the media on the left side.

<Canvas>
  <Story name="MediaLeft">
    <MediaText
      title="New Designs"
      body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
      image={{
        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
        alt: 'Some alt text'
      }}
      cta={{icon: 'arrowRight', text: 'Take a look'}}
      mediaLeft
    />
  </Story>
</Canvas>

## Children

You can display children as an element using the `children` prop. If used, the `title`, `body`, and `cta` will not display.

<Canvas>
  <Story name="Children">
    <MediaText
      children={
        <div>
          <p>Hi I'm a child element!</p>
        </div>
      }
      image={{
        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
        alt: 'Some alt text'
      }}
      mediaLeft
    />
  </Story>
</Canvas>
