import React from "react";
import { NavLink } from "react-router-dom";

export default function SideBarItem(
  props: React.PropsWithChildren<{
    title: string;
    setOpenSideBar?: (value: boolean) => void;
    url: string;
    icon: JSX.Element;
  }>,
) {
  return (
    <NavLink
      to={props.url}
      style={{ width: "100%" }}
      className={"bg-sideitem-hover-bg rounded-md duration-300"}
    >
      <div className="flex flex-row gap-5 transition-all w-full p-2 pl-3 rounded text-gql-white text-left-bar-text-gray hover:text-gql-white hover:bg-sideitem-hover-bg ">
        <span className="w-auto h-auto">{props.icon}</span>

        <span className="leading-5 text-sm tracking-wider my-auto text-center">
          {props.title}
        </span>
      </div>
    </NavLink>
  );
}
