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")}>
        <div className="w-full grid grid-flow-col">
          {Array.from({ length: 12 }).map((_, index) => (
            <div key={index} className="flex justify-center">
              <img 
                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"} 
                alt={index % 2 === 0 ? "computer icon" : "people icon"} 
                width="30" 
                height="30" 
              />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}