import {useRouter} from 'next/router'
import Link from 'next/link'
import React, {Children} from 'react'

const ActiveLink = ({ children, activeClassName, ...props }) => {
  const { asPath } = useRouter()
  const child = Children.only(children)
  const childClassName = child.props.className || ''

  const className =
    asPath === props.href || asPath === props.as
      ? `${childClassName} ${activeClassName}`.trim()
      : childClassName

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
}

ActiveLink.defaultProps = {
    activeClassName: 'active'
} as Partial<Props>

export default ActiveLink