"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { authClient } from "@/lib/auth-client";
import { cn } from "@/lib/utils";

/** A link in a navigation bar, marked when it's the current page (or, unless exact, a page under it). */
export function NavLink({
  href,
  exact = false,
  children,
}: {
  href: string;
  exact?: boolean;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const here = pathname === href || (!exact && pathname.startsWith(href + "/"));
  return (
    <Link
      href={href}
      aria-current={here ? "page" : undefined}
      className={cn(
        "rounded-md px-2.5 py-1.5 text-muted-foreground transition-colors hover:text-foreground",
        here && "bg-muted text-foreground",
      )}
    >
      {children}
    </Link>
  );
}

export function SignOutButton() {
  const router = useRouter();
  const [pending, setPending] = useState(false);
  return (
    <Button
      variant="outline"
      disabled={pending}
      onClick={async () => {
        setPending(true);
        await authClient.signOut();
        router.push("/");
        router.refresh();
      }}
    >
      {pending ? "Signing out…" : "Sign out"}
    </Button>
  );
}