import * as React from "react";
import clsx from "clsx";
import { useRouter } from "next/router";
import NextLink from "next/link";
import MuiLink from "@material-ui/core/Link";
const NextComposed = React.forwardRef((props, ref) => {
    const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
    return (<NextLink href={href} prefetch={prefetch} as={as} replace={replace} scroll={scroll} shallow={shallow} passHref={passHref}>
        <a ref={ref} {...other}/>
      </NextLink>);
});
// A styled version of the Next.js Link component:
// https://nextjs.org/docs/#with-link
function Link(props) {
    const { href, activeClassName = "active", className: classNameProps, innerRef, naked, ...other } = props;
    const router = useRouter();
    const pathname = typeof href === "string" ? href : href.pathname;
    const className = clsx(classNameProps, {
        [activeClassName]: router.pathname === pathname && activeClassName
    });
    if (naked) {
        return (<NextComposed className={className} ref={innerRef} href={href} {...other}/>);
    }
    return (<MuiLink component={NextComposed} className={className} ref={innerRef} href={href} {...other}/>);
}
export default React.forwardRef((props, ref) => (<Link {...props} innerRef={ref}/>));