import { NavLink } from "react-router";
import HomeIcon from "./icons/HomeIcon";
import DesktopIcon from "./icons/DesktopIcon";
import Button from "./Button";
import clsx from "clsx";
import PeopleIcon from "./icons/PeopleIcon";
import ClientIcon from "./icons/ClientIcon";
import AppsIcon from "./icons/AppsIcon";

function Navbar() {
  return (
    <div className="flex 2xl:gap-[0.278vw] items-center">
      <NavLink to="/" className="outline-none">
        {({ isActive }) => (
          <Button
            variant="menu"
            size="large"
            className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
          >
            <span className="2xl:size-[1.111vw] size-4">
              <HomeIcon />
            </span>
            <span className="2xl:text-[0.972vw] text-sm font-medium">
              Главная
            </span>
          </Button>
        )}
      </NavLink>
      <NavLink to="/sessions" className="outline-none">
        {({ isActive }) => (
          <Button
            variant="menu"
            size="large"
            className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
          >
            <span className="2xl:size-[1.111vw] size-4">
              <DesktopIcon />
            </span>
            <span className="2xl:text-[0.972vw] text-sm font-medium">
              Сеансы
            </span>
          </Button>
        )}
      </NavLink>
      <NavLink to="/managers" className="outline-none">
        {({ isActive }) => (
          <Button
            variant="menu"
            size="large"
            className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
          >
            <span className="2xl:size-[1.111vw] size-4">
              <PeopleIcon />
            </span>
            <span className="2xl:text-[0.972vw] text-sm font-medium">
              Менеджеры
            </span>
          </Button>
        )}
      </NavLink>
      <NavLink to="/clients" className="outline-none">
        {({ isActive }) => (
          <Button
            variant="menu"
            size="large"
            className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
          >
            <span className="2xl:size-[1.111vw] size-4">
              <ClientIcon />
            </span>
            <span className="2xl:text-[0.972vw] text-sm font-medium">
              Клиенты
            </span>
          </Button>
        )}
      </NavLink>
      <NavLink to="/projects" className="outline-none">
        {({ isActive }) => (
          <Button
            variant="menu"
            size="large"
            className={clsx(isActive && "!bg-[#F8F7FE] !text-[#7B60F3]")}
          >
            <span className="2xl:size-[1.111vw] size-4">
              <AppsIcon />
            </span>
            <span className="2xl:text-[0.972vw] text-sm font-medium">
              Проекты
            </span>
          </Button>
        )}
      </NavLink>
    </div>
  );
}

export default Navbar;
