import { cn } from "@/lib/utils";
import { auth } from "@clerk/nextjs/server";
import Link from "next/link";
import { buttonVariants } from "./ui/button";

export default function AdminHeader() {
  const isAdmin = auth().sessionClaims?.metadata?.role === "admin";

  return (
    <>
      {isAdmin && (
        <div className="fixed text-sm flex flex-col md:flex-row items-center top-0 px-4 py-2 right-[50%]  translate-x-[50%] w-fit rounded-b-xl bg-red-500 text-white text-center  z-50">
          <p className=" mr-4 text-nowrap">
            Estás viendo la vista de usuario como administrador.
          </p>
          <Link
            href="/dashboard"
            className={cn(
              buttonVariants({
                variant: "outline",
                size: "sm",
                className: "bg-transparent hover:text-black",
              })
            )}
          >
            <span className="text-inherit">Ir al panel de administrador</span>
          </Link>
        </div>
      )}
    </>
  );
}