import React from 'react';

import {
  TypographyComponent
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<TypographyComponent>): JSX.Element {
  const Typography = component;
  
  return <>
    <H3>标题 <code>TypographyH1-6</code></H3>
    <Typography.H1>推荐你直接 import TypographyH1，不要不识好歹 🐶</Typography.H1>
    <Typography.H2>推荐你直接 import TypographyH2，不要不识好歹 🐶</Typography.H2>
    <Typography.H3>推荐你直接 import TypographyH3，不要不识好歹 🐶</Typography.H3>
    <Typography.H4>推荐你直接 import TypographyH4，不要不识好歹 🐶</Typography.H4>
    <Typography.H5>推荐你直接 import TypographyH5，不要不识好歹 🐶</Typography.H5>
    <Typography.H6>推荐你直接 import TypographyH6，不要不识好歹 🐶</Typography.H6>
    <H3>带默认样式的文本 <code>TypographyText</code></H3>
    <Typography.Text>无样式</Typography.Text>
    <br />
    <Typography.Text mark>mark</Typography.Text>
    <br />
    <Typography.Text code>code</Typography.Text>
    <br />
    <Typography.Text underline>underline</Typography.Text>
    <br />
    <Typography.Text delete>delete</Typography.Text>
    <br />
    <Typography.Text strong>strong</Typography.Text>
    <H3>Typography.Paragraph（可能要把外边那个杀了？？）</H3>
    <Typography.Paragraph>{LOREM}</Typography.Paragraph>
  </>;
}