import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

function NavIcon({
  icon,
  tooltip,
  href,
  target,
  onClick,
}: {
  icon: React.ReactNode;
  tooltip: string;
  href?: string;
  target?: string;
  onClick?: () => void;
}) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <a
          href={href}
          target={target}
          onClick={onClick}
          className={cn(
            buttonVariants({
              variant: "ghost",
              size: "icon",
            }),
            "rounded-full text-foreground transition-all group-hover:scale-110",
          )}
        >
          {icon}
        </a>
      </TooltipTrigger>
      <TooltipContent>
        <p>{tooltip}</p>
      </TooltipContent>
    </Tooltip>
  );
}

export default function Navbar() {
  return (
    <div className={cn("flex justify-end text-3xl")}>
      <a href="/src/pages/GetInvolved.astro" className={cn("text-blue-500")}>
        Get Involved
      </a>
      <Separator orientation="vertical" className="w-5" />
      <a href="/src/pages/PointsOfUnity.astro" className={cn("text-green-500")}>
        Points of Unity
      </a>
      <Separator orientation="vertical" className="w-5" />
      <a
        href="/src/pages/WhatWereWorkingOn.astro"
        className={cn("text-red-500")}
      >
        What We're Working On
      </a>
    </div>
  );
}
