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

interface MenuItemProps {
    to: string,
}

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

    const location = useLocation();

    return (
        <li className={['mb-4', location.pathname === to ? 'relative before:bg-[#fbceb1] before:absolute before:w-[5px] before:h-full before:block before:top-0 before:-left-5': null].join(' ')}><Link to={to} className={['text-slate-500 hover:text-[#fbceb1] transition-all text-lg font-medium', location.pathname === to ? 'text-[#fbceb1]' : null].join(' ')}>{children}</Link></li>
    )
}

export default MenuItem;