import { useRouter } from 'next/router';
import { Menu,Icon } from 'antd';
import PropTypes from 'prop-types';
import Link from 'next/link';

const Navigation = () => {
  const navPoints = [
    {
      id: 0,key: '/index',icon: 'info',title: 'Testpage',path: '/',},{
      id: 1,key: '/helloworld',title: 'Hello World',path: '/helloworld',];

  const propTypes = {
    onClick: PropTypes.function,href: PropTypes.string,icon: PropTypes.string.isrequired,title: PropTypes.string.isrequired,};

  const defaultProps = {
    onClick: Function.prototype,href: '',};


  const CustomNavPoint = React.forwardRef(
    ({
      onClick,href,icon,title,ref) => (
      <a href={href} onClick={onClick} ref={ref}>
        <Icon type={icon} />
        {title}
      </a>
    ),);
  CustomNavPoint.propTypes = propTypes;
  CustomNavPoint.defaultProps = defaultProps;
  CustomNavPoint.displayName = 'CustomNavPoint';

  const router = useRouter();
  const currentRoute = router.pathname;
  return (
    <Menu
      selectedKeys={[currentRoute === '/' ? '/index' : currentRoute]}
      mode="horizontal"
      overflowedIndicator={<Icon type="bars" />}
    >
      {navPoints && navPoints.length
        ? navPoints.map((el) => (
          <Menu.Item key={el.key} title={el.title}>
            <Link href={el.path} passHref>
              <CustomNavPoint icon={el.icon} href={el.path} title={el.title} />
            </Link>
          </Menu.Item>
        ))
        : null}
    </Menu>
  );
};
export default Navigation;