import { cn } from "@/lib/utils";

interface NavbarProps {
  activePage?: string;
}

export default function Navbar({ activePage = "" }: NavbarProps) {
  return (
    <>
      <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
        <div>
          <strong className={cn("sm:text-2xl md:text-4xl")}>
            <a 
                className={cn(
                  activePage === "Home" && "border-b-2 border-black-500",
                )}
            href="/">Resist Tech Monopolies</a>
          </strong>
        </div>
        <strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
       
          <a
            href="/PointsOfUnity/"
            className={cn(
              "text-green-500",
              activePage === "PointsOfUnity" && "border-b-2 border-green-500",
            )}
          >
            Points of Unity
          </a>
          <a
            href="/WhatWereWorkingOn/"
            className={cn(
              "text-red-500",
              activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500",
            )}
          >
            What We're Working On
          </a>
        </strong>
      </div>

      <div className={cn("flex flex-row justify-between pb-8")}>
        {[
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        ].map(() => (
          <>
            <a
              href="https://www.flaticon.com/free-icons/computer"
              title="computer icons"
            >
              <img
                src="../public/assets/computer.png"
                alt="computer icon"
                width="30"
                height="30"
              />
            </a>

            <a
              href="https://www.flaticon.com/free-icons/peopler"
              title="people icons"
            >
              <img
                src="../public/assets/people.png"
                alt="people icon"
                width="30"
                height="30"
              />
            </a>
          </>
        ))}
      </div>
    </>
  );
}
