import React from 'react';
import styled from 'styled-components';

import {
  MessageComponent
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../types';

const ScTesting = styled.div`
  .next-message {
    margin: 4px;
  }
`;

export default function Testing({
  component
}: ITestingProps<MessageComponent>): JSX.Element {
  const Message = component;
  
  return <ScTesting>
    <Message title="Success" type="success">Success message is very sexy.</Message>
    <Message title="Warning" type="warning">Warning message is very sexy.</Message>
    <Message title="Error" type="error">Error message is very sexy.</Message>
    <Message title="Notice" type="notice">Notice message is very sexy.</Message>
    <Message title="Help" type="help">Help message is very sexy.</Message>
    <Message title="Loading" type="loading">Loading message is very sexy.</Message>
  </ScTesting>;
}