import Link from "next/link";
import Logo from "./logo";
import { RedirectButton } from "./rediect-button";
import { ToggleThemeButton } from "./theme-toggle-button";

type Page = {
  title: string;
  url: string;
};

const pages: Page[] = [
  { title: "Player", url: "/player/Notch" },
  { title: "Server", url: "/server/java/hypixel.net" },
];

export default function NavBar(): JSX.Element {
  return (
    <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
      <div className="flex items-center gap-2 pl-3 pr-3">
        <Logo />
        <Link href="/" className="hidden md:block">
          <p>Minecraft Utilities</p>
        </Link>
      </div>
      {pages.map((page, index) => {
        return <RedirectButton key={index} title={page.title} url={page.url} />;
      })}

      <div className="flex-grow"></div>

      <div className="mr-4 flex items-center gap-2">
        <RedirectButton
          title="Star us on Github!"
          url="https://github.com/RealFascinated/minecraft-helper"
          openInNewTab
        />
        <ToggleThemeButton />
      </div>
    </div>
  );
}