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

function Navbar() {
  return (
    <div className="flex 2xl:gap-[0.278vw] items-center">
      <NavLink
        to="/"
        className={({ isActive }) =>
          clsx(
            "2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
            isActive && "text-[#7B60F3]"
          )
        }
      >
        <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
          <HomeIcon />
        </span>
        <span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
      </NavLink>
      <NavLink
        to="sessions"
        className={({ isActive }) =>
          clsx(
            "2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
            isActive && "text-[#7B60F3]"
          )
        }
      >
        <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
          <DesktopIcon />
        </span>
        <span className="2xl:text-[0.972vw] text-sm font-medium">Сеансы</span>
      </NavLink>
      <NavLink
        to="/"
        className={({ isActive }) =>
          clsx(
            "2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
            isActive && "text-[#7B60F3]"
          )
        }
      >
        <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
          <HomeIcon />
        </span>
        <span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
      </NavLink>
      <NavLink
        to="/"
        className={({ isActive }) =>
          clsx(
            "2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
            isActive && "text-[#7B60F3]"
          )
        }
      >
        <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
          <HomeIcon />
        </span>
        <span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
      </NavLink>
      <NavLink
        to="/"
        className={({ isActive }) =>
          clsx(
            "2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
            isActive && "text-[#7B60F3]"
          )
        }
      >
        <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
          <HomeIcon />
        </span>
        <span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
      </NavLink>
      {/*  */}
    </div>
  );
}

export default Navbar;