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

type Props = {
    href: string
    linkName: React.ReactNode
    className?: string
    activeClassName?: string
}

const defaultProps = {
    activeClassName: 'is-active',
}

const NavLink: React.FC<Props> = ({ href, linkName, className, activeClassName }) => {
    const router = useRouter()

    let classes = `${className ?? ''} ${router.pathname === href ? activeClassName : ''}`.trim();

    return (
        <Link href={href}>
            <a className={classes}>
                {linkName}
            </a>
        </Link>
    )
}

NavLink.defaultProps = defaultProps

export default NavLink