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

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

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

const ScLogo = styled(RainbowText)`
    padding: 0 16px;
    font-size: 18px;
`;
const ScAccount = styled.div`
  margin: 0 20px;
  color: #fff;
`;

export default function Testing({
  component
}: ITestingProps<NavComponent>): JSX.Element {
  const Nav = component;
  
  return <>
    <H3>Some Case</H3>
    <Nav {...{
      mode: 'popup',
      direction: 'hoz',
      type: 'primary',
      header: <ScLogo>NEWBEE</ScLogo>,
      footer: <ScAccount>驳是</ScAccount>,
      defaultSelectedKeys: ['home'],
      triggerType: 'hover'
    }}>
      <Nav.Item key="home">Home</Nav.Item>
      <Nav.SubNav label="Component" noIcon>
        <Nav.SubNav label="Next">
          <Nav.Item key="next-design">Design</Nav.Item>
          <Nav.Item key="next-doc">Document</Nav.Item>
        </Nav.SubNav>
        <Nav.SubNav label="Meet">
          <Nav.Item key="meet-design">Design</Nav.Item>
          <Nav.Item key="meet-doc">Document</Nav.Item>
        </Nav.SubNav>
      </Nav.SubNav>
      <Nav.Item key="document">Document</Nav.Item>
    </Nav>
  </>;
}