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

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

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

const ScSquare = styled.span`
  margin: 1px 2px;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  background-color: #eee;
  text-align: center;
`;

export default function Testing({
  component
}: ITestingProps<BadgeComponent>): JSX.Element {
  const Badge = component;
  
  return <>
    <H3>数字</H3>
    <Badge count={0}>
      <ScSquare />
    </Badge>
    <Badge count={10}>
      <ScSquare />
    </Badge>
    <H3>数字上限</H3>
    <Badge count={99}>
      <ScSquare />
    </Badge>
    <Badge count={100}>
      <ScSquare />
    </Badge>
    <Badge count={100} overflowCount={10}>
      <ScSquare />
    </Badge>
    <Badge count={1000} overflowCount={999}>
      <ScSquare />
    </Badge>
    <H3>点</H3>
    <Badge dot>
      <ScSquare />
    </Badge>
    <Badge count={0} dot>
      <ScSquare />
    </Badge>
    <Badge count={7} dot>
      <ScSquare>BUG</ScSquare>
    </Badge>
    <H3>自闭</H3>
    <Badge count={25} />
    <Badge {...{
      count: 7,
      style: {
        backgroundColor: '#fff',
        color: '#999',
        border: '1px solid #d9d9d9'
      }
    }} />
    <Badge {...{
      count: 107,
      style: {
        backgroundColor: '#87d068'
      }
    }} />
    <Badge dot />
    <Badge {...{
      content: 'SHOOT',
      style: {
        backgroundColor: '#cfb53b',
        color: '#fff'
      }
    }} />
  </>;
}