import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPMessage, OPButton } from '../../src/index';

export default {
  title: '组件/反馈/OPMessage',
  component: OPMessage,
} as ComponentMeta<typeof OPMessage>;

export const 信息: ComponentStory<typeof OPMessage> = (): JSX.Element => {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  return (
    <div>
      <OPButton
        onClick={() => {
          setVisible(true);
        }}
      >
        成功
      </OPButton>
      <OPButton
        onClick={() => {
          setVisible2(true);
        }}
      >
        警告
      </OPButton>
      <OPMessage onChange={setVisible} title='标题' visible={visible} />
      <OPMessage
        onChange={setVisible2}
        type='warning'
        title='扫描的xinren25不是空容器/批次号/已关联批次的容器或运单号，请重新扫描'
        subTitle='请注意'
        visible={visible2}
      />
    </div>
  );
};