// @flow
import React from 'react';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { Message } from './index';
import docs from './message.mdx';

export default {
  component: Message,
  title: 'Components/Feedback/Message',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <Message>
    Some helpful messaging goes here that should include information on what is
    happening and how it affects users.
  </Message>
);

export const Error = () => (
  <Message level="error">Some helpful message.</Message>
);
export const Info = () => <Message level="info">Some helpful message.</Message>;
export const Success = () => (
  <Message level="success">Some helpful message.</Message>
);
export const ErrorTitle = () => (
  <Message level="error" title="Alert Short Title">
    Some helpful message.
  </Message>
);
export const InfoTitle = () => (
  <Message level="info" title="Alert Short Title">
    Some helpful message.
  </Message>
);
export const SuccessTitle = () => (
  <Message level="success" title="Alert Short Title">
    Some helpful message.
  </Message>
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={Message}>Some helpful message.</MarginChecker>
);
