import { CogIcon, HomeIcon } from "@heroicons/react/24/solid";
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import React from "react";
import NavbarButton from "./navbar-button";
import ProfileButton from "./profile-button";
import { SwordIcon, TrendingUpIcon } from "lucide-react";

type NavbarItem = {
  name: string;
  link: string;
  align: "left" | "right";
  icon: React.ReactNode;
};

const items: NavbarItem[] = [
  {
    name: "Home",
    link: "/",
    align: "left",
    icon: <HomeIcon className="h-5 w-5" />,
  },
  {
    name: "Ranking",
    link: "/ranking",
    align: "left",
    icon: <TrendingUpIcon className="h-5 w-5" />,
  },
  {
    name: "Score Feed",
    link: "/scores",
    align: "left",
    icon: <SwordIcon className="h-5 w-5" />,
  },
  {
    name: "Search",
    link: "/search",
    align: "right",
    icon: <MagnifyingGlassIcon className="h-5 w-5" />,
  },
  {
    name: "Settings",
    link: "/settings",
    align: "right",
    icon: <CogIcon className="h-5 w-5" />,
  },
];

// Helper function to render each navbar item
const renderNavbarItem = (item: NavbarItem) => (
  <div className="flex items-center w-fit gap-2">
    {item.icon && <div>{item.icon}</div>}
    <p className="hidden lg:block">{item.name}</p>
  </div>
);

export default function Navbar() {
  const rightItems = items.filter(item => item.align === "right");
  const leftItems = items.filter(item => item.align === "left");

  return (
    <div className="w-full sticky top-0 z-[999] h-10 items-center flex justify-between bg-secondary/95 px-1">
      <div className="md:max-w-[1600px] w-full h-full flex justify-between m-auto">
        {/* Left-aligned items */}
        <div className="flex items-center h-full">
          <ProfileButton />

          {leftItems.map((item, index) => (
            <Link href={item.link} key={index} className="h-full">
              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
            </Link>
          ))}
        </div>

        {/* Right-aligned items */}
        <div className="flex items-center h-full">
          {rightItems.map((item, index) => (
            <Link href={item.link} key={index} className="h-full">
              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}