import { FC, PropsWithChildren } from 'react'
import { Link } from 'react-router-dom';
import { useLocation  } from 'react-router-dom';

interface MenuItemProps {
    to: string,
    className?: string
}

const MenuItem: FC<PropsWithChildren<MenuItemProps>> = ({to, className, children}) => {

    const location = useLocation();

    return (
        <li className={['mb-6', className].join(' ')}><Link to={to} className={['text-white hover:text-apricot transition-all text-xl font-medium', location.pathname === to ? '!text-gray-800 block bg-apricot p-4 rounded-sm' : null].join(' ')}>{children}</Link></li>
    )
}

export default MenuItem;