import Link from "next/link";
import Logo from "./logo";

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

const pages: Page[] = [
  { title: "Player", url: "/player" },
  { title: "Server", url: "/server" },
];

export default function NavBar() {
  return (
    <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85">
      <div className="flex items-center gap-2 pl-3 pr-3">
        <Logo />
        <Link href="/">
          <p>Minecraft Utilities</p>
        </Link>
      </div>
      {pages.map((page, index) => {
        return (
          <div key={index} className="pt-4 pb-4 w-fit rounded-lg">
            <Link href={page.url}>
              <p className="hover:text-primary transition-all">{page.title}</p>
            </Link>
          </div>
        );
      })}
    </div>
  );
}