import React from 'react';

import {
  CollapseComponent
} from '@alicloud/console-components';
import {
  H4,
  List
} from '@alicloud/demo-rc-elements';

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

export default function ByChildren({
  component
}: ITestingProps<CollapseComponent>): JSX.Element {
  const Collapse = component;
  
  return <>
    <Collapse>
      <Collapse.Panel title="simple tile">{LOREM}</Collapse.Panel>
      <Collapse.Panel title="What are Promotion Products?">{LOREM}</Collapse.Panel>
      <Collapse.Panel title="Why can i not submit a higher price?">{LOREM}</Collapse.Panel>
      <Collapse.Panel title="What is Promo Stock?" disabled>{LOREM}</Collapse.Panel>
    </Collapse>
    <H4>面板嵌套</H4>
    <Collapse>
      <Collapse.Panel title="simple tile">
        <Collapse.Panel title="simple tile">{LOREM}</Collapse.Panel>
        <Collapse.Panel title="What are Promotion Products?">{LOREM}</Collapse.Panel>
        <Collapse.Panel title="Why can i not submit a higher price?">{LOREM}</Collapse.Panel>
        <Collapse.Panel title="What is Promo Stock?" disabled>{LOREM}</Collapse.Panel>
      </Collapse.Panel>
      <Collapse.Panel title="What are Promotion Products?">
        <List>
          <>{LOREM}</>
          <>{LOREM}</>
          <>{LOREM}</>
          <>{LOREM}</>
          <>{LOREM}</>
        </List>
      </Collapse.Panel>
    </Collapse>
  </>;
}