import {Link} from "react-router-dom";

export default function SidebarItem({icon, title, href, onClick, activeState}) {
    return (
        <Link
            onClick={onClick}
            className={`mr-3 flex my-2 rounded-lg transition duration-600 ${activeState ? 'bg-gradient-to-r from-transparent to-gray-300 border-r-[#2F2F2F] pr-2' : 'hover:pr-[0.05rem] hover:bg-[#CDCDCD]'}`}
            to={href}
        >
            <img alt={''} className={`mr-3 ${activeState ? '' : 'opacity-40'}`} src={icon}/>
            <div
                className={`w-full flex h-full px-2 py-2 font-[dana] ${activeState ? 'text-dark' : 'text-gray-500'}`}
            >
                {title}
            </div>
        </Link>
    )
}