import React, {
  useState
} from 'react';

import {
  LoadingComponent
} from '@alicloud/console-components';
import {
  P,
  InputSwitch
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<LoadingComponent>): JSX.Element {
  const Loading = component;
  
  const [stateVisible, setStateVisible] = useState(true);
  
  return <>
    <InputSwitch {...{
      label: 'props.visible',
      value: stateVisible,
      onChange: setStateVisible
    }} />
    <P>Loading 把内部包成了 <code>inline-block</code></P>
    <Loading tip="加载中..." visible={stateVisible}>
      <div>最基础的 Loading 用法，裹法</div>
    </Loading>
  </>;
}