import {FC} from 'react';
import {useCheck, useMenuTree} from './hooks';
import {Tree} from 'antd';

const TreeInfo: FC = function () {
  const data = useMenuTree();
  const [list, {onCheck}] = useCheck();

  return (
    <Tree
      checkable
      treeData={data}
      onCheck={onCheck as any}
      checkedKeys={list}
      defaultExpandAll
      height={300}
      data-testid='user_tree'
      style={{width: '240px', margin: '0 auto'}}
    />
  );
};

export default TreeInfo;