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

import { PAGES } from '../../../_utils/taxonomy'
import { Avatar } from '../../../avatar'
import { Button } from '../../../button'
import { SpacingDivider, SpacingDividerSize } from '../../../divider/spacingDivider'
import { ItemInfo } from '../../../itemInfo'
import { LayoutNormalizer } from '../../../layout/layoutNormalizer'
import { BaseSection } from '../../../layout/section/baseSection'
import { MarketingMessage } from '../../../marketingMessage'
import { SubHeader } from '../../../subHeader'
import { Text } from '../../../text'


<Meta title={`${PAGES}/Messaging/Braze marketing`} />

<Canvas>
  <Story name="Braze message">
    <React.Fragment>
      <LayoutNormalizer useLegacyNormalization={false} />
      <BaseSection>
        <ItemInfo mainInfo="" mainTitle="BlaBlaCar" icon={<Avatar image="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg" />} />
        <MarketingMessage>
          <SubHeader>Marketing message title</SubHeader>
          <Text>
            This is a simple multiline marketing message.
            {'Long content.'.repeat(50)}
          </Text>
          <SpacingDivider size={SpacingDividerSize.LARGE} />
          <div style={{ textAlign: 'center' }}>
            <Button>Marketing button</Button>
          </div>
        </MarketingMessage>
      </BaseSection>
    </React.Fragment>
  </Story>
</Canvas>