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

export default function Navbar() {
  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")}>
            Resist Tech Monopolies
          </strong>
        </div>
        <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
          <a
            href="/getInvolved/"
            className={cn("text-blue-500")}
          >
            Get Involved
          </a>
          {/* <Separator orientation="vertical" className="w-5" /> */}
          <a
            href="/pointsOfUnity/"
            className={cn("text-green-500")}
          >
            Points of Unity
          </a>
          {/* <Separator orientation="vertical" className="w-5" /> */}
          <a
            href="/whatWereWorkingOn/"
            className={cn("text-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="/computer.png"
                alt="computer icon"
                width="30"
                height="30"
              />
            </a>

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